阿里巴巴矢量图标库iconfont使用及7B2主题图标示例

释放双眼,带上耳机,听听看~!

阿里巴巴矢量图标库iconfont使用及7B2主题图标示例 网站开发

IconFont的作用就是用字体的格式来取代图片、特殊字体的展示,用得比较多的就是一些纯色的图标,具体主要由当前css3属性里的自定义字体(@font-face)来实现。

1.首先在Iconfont-阿里巴巴矢量图标库上面将你需要的图标点击购物车按钮加入“暂存架”;
www.iconfont.cn
2.选择完所有要用的图标后“添加至项目”,给它命名。然后在“图标管理-我的项目”中找到这个项目,查看在线代码,把里面的代码复制到CSS中。

第一步:拷贝项目下面生成的font-face

@-face {

-family: ‘iconfont‘; /* project id 209539 */

src: url(‘//at.alicdn.com/t/font_4yyty9qjdzpvi.eot‘);

src: url(‘//at.alicdn.com/t/font_4yyty9qjdzpvi.eot?#iefix‘) format(‘embedded-opentype‘),

url(‘//at.alicdn.com/t/font_4yyty9qjdzpvi.woff‘) format(‘woff‘),

url(‘//at.alicdn.com/t/font_4yyty9qjdzpvi.ttf‘) format(‘truetype‘),

url(‘//at.alicdn.com/t/font_4yyty9qjdzpvi.svg#‘) format(‘svg‘);

}

要在// 前加上http:或者https: 以上代码使用如下

@font-face {

font-family: ‘‘; /* project id 209539 */

src: url(‘http://at.alicdn.com/t/font_4yyty9qjdzpvi.eot‘);

src: url(‘http://at.alicdn.com/t/font_4yyty9qjdzpvi.eot?#iefix‘) format(‘embedded-opentype‘),

url(‘http://at.alicdn.com/t/font_4yyty9qjdzpvi.woff‘) format(‘woff‘),

url(‘http://at.alicdn.com/t/font_4yyty9qjdzpvi.ttf‘) format(‘truetype‘),

url(‘http://at.alicdn.com/t/font_4yyty9qjdzpvi.svg#‘) format(‘svg‘);

}

第二步:定义使用iconfont的样式

.iconfont {

font-family:"iconfont" !important;

font-size:16px;

font-style:normal;

-webkit-font-smoothing: antialiased;

-webkit-text-stroke-width: 0.2px;

-moz-osx-font-smoothing: grayscale;

}

第三步:挑选相应图标并获取字体编码,应用于页面

<i class="iconfont"></i>

<i class="iconfont"></i>

代码如下:

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

@font-face {

font-family: ‘iconfont‘; /* project id 209539 */

src: url(‘//at.alicdn.com/t/font_4yyty9qjdzpvi.eot‘);

src: url(‘//at.alicdn.com/t/font_4yyty9qjdzpvi.eot?#iefix‘) format(‘embedded-opentype‘),

url(‘//at.alicdn.com/t/font_4yyty9qjdzpvi.woff‘) format(‘woff‘),

url(‘//at.alicdn.com/t/font_4yyty9qjdzpvi.ttf‘) format(‘truetype‘),

url(‘//at.alicdn.com/t/font_4yyty9qjdzpvi.svg#iconfont‘) format(‘svg‘);

}

.iconfont {

font-family:"iconfont" !important;

font-size:16px;

font-style:normal;

-webkit-font-smoothing: antialiased;

-webkit-text-stroke-width: 0.2px;

-moz-osx-font-smoothing: grayscale;

}

</style>

<i class="iconfont"></i>

<i class="iconfont"></i>

<i class="iconfont"></i>

font-class引用

第一步:拷贝项目下面生成的fontclass代码: css引入

//at.alicdn.com/t/font_4yyty9qjdzpvi.

第二步:挑选相应图标并获取类名,应用于页面:

<i class="iconfont icon-gouwuche"></i>

代码如下:

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<link rel="stylesheet" href="http://at.alicdn.com/t/font_4yyty9qjdzpvi.">

<title>Document</title>

<style>

.iconfont {

font-family:"iconfont" !important;

font-size:16px;

font-style:normal;

-webkit-font-smoothing: antialiased;

-webkit-text-stroke-width: 0.2px;

-moz-osx-font-smoothing: grayscale;

}

</style>

<i class="iconfont icon-lianjie"></i>

<i class="iconfont icon-lajixiang"></i>

<i class="iconfont icon-gouwuche"></i>

主题图标汇总

查源码可得主题ICON使用阿里云CDN:

https://at.alicdn.com/t/font_416760_4qh32v621kt.css

                                                                                                                                                  
使用方法:

<i class="iconfont zrz-icon-font-buxihuan"></i>

在线交流反馈:[su_button url="/forums/forum/52302" target="blank" style="stroked" background="#cfd2d6" color="#2b2929" size="4"]7b2柒比贰主题论坛[/su_button]

联系作者:

相关商品

B2主题 7B2主题 wordpress正版商业主题 wordpress企业主题 多功能主题[出售]

相关专题

7B2/B2主题

B2/7B2主题- WordPress多功能主题 B2的是一款面向未来的Wordpress主题,这款主题与市面上所有已售主题有着巨大的差别。您看到的可能仅仅是它的外表,它的运行机制和功能可能是您更需要了解的。   4年多,我们只专注这一个主题的开发,用户购买以后终生享受升级服务,您买完了直接用,剩下…

为TA充电
共{{data.count}}人
人已赞赏

【龙萱坤诺】声明:

龙萱坤诺所有资源来源于网络及用户分享或为本站原创,仅限用于学习和研究,如有侵权请邮件联系站长!不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站概不负责!

 

龙萱坤诺欢迎您投稿发表文章,更有龙萱坤诺奖励和额外收入!根据投稿内容质量,可获邀入驻本平台,开启您的站长之路!

 

如有链接无法下载、失效或广告,请到论坛反馈!

联系我们

© 转载请声明:转载自“龙萱坤诺"

网站开发

7b2柒比贰主题首页文章随机缩略图

2019-3-6 15:33:17

网站开发

7b2主题avatar头像服务器为v2ex的CDN

2019-3-6 16:08:09

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索

热门专栏

文章发布排行

更多
  • 官方编辑

    仁师lv9

    文章

    6176

    评论

    4

    粉丝

    6

    关注

    0

    龙萱坤诺官方编辑员
  • 玩机技巧

    初学子lv0

    文章

    819

    评论

    2

    粉丝

    3

    关注

    0

    分享最新、最热的玩机教程。有需要的教程也可以圈子发帖提需求呦。
  • 微客创赢

    坛圣lv13

    文章

    314

    评论

    28

    粉丝

    13

    关注

    4

    程序员小白
  • 龙萱坤诺

    坛圣lv13

    文章

    141

    评论

    71

    粉丝

    8

    关注

    5

    龙萱坤诺管理员
  • wordpress建站

    有学者lv2

    文章

    89

    评论

    13

    粉丝

    2

    关注

    0

    Wordpress建站服务商