阿里图标使用方法(知更鸟主题)

2018年1月15日14:48:24 1 634

一直使用这个知更鸟begin主题,在知更鸟begin主题5.2版本后,都是使用的是阿里巴巴矢量图标库(Iconfont)。与之前使用的 Font Awesome图标,有绝对的优势:图标字体多、按需使用、可以外链字体库。

目前Iconfont大概有一百三十多万个,而Font Awesome只有600多,所以有更多的选择。

Font Awesome不论使用几个图标字体,都需要完整加载字体库(1M多),而Iconfont可以按你所需定制图标字体库,并且可以根据你的需要随时更改,目前主题必须的字体图标库只有100多K。

使用Iconfont图标字体,不一定要在本地加载,可以直接将生成的字体链接添加到主题中。

介绍完阿里巴巴矢量图标库的优势,下面开始具体使用方法:下面所有提到be的改成zm就行了,如果继续使用be,右下角的QQ在线图标会失效,变成其他的。鸟哥修改了这个BUG。

首先、登录阿里图标库

阿里图标库:http://www.iconfont.cn/

阿里图标使用方法(知更鸟主题)

这里朱曙明使用的新浪微博登录。

登录后,找到图标管理中的我的项目,新建项目。

阿里图标使用方法(知更鸟主题)

在新建项目中,将FontClass/Symbol 前缀和Font Family两项中必须输入 be  前后不能有空格

新建项目后,再在图标库中,选择自己需要的图标,添加入库

阿里图标使用方法(知更鸟主题)

添加入库后,再在购物车中,添加到项目,刚才新建的项目中。

阿里图标使用方法(知更鸟主题)

在刚才新建的项目中,点击查看在线链接,获取在线css链接,点击生成代码。如图。

阿里图标使用方法(知更鸟主题)

把css链接添加到知更鸟主题后面辅助设置的阿里图标库中。

最后,在菜单中添加阿里图标,这里的添加是需要在css中添加的,也就是需要css类才可以填写。

应该都知道怎么添加了。

2018-1-23:忘记了一个东西,知更鸟主题,需要把以上所有 be 改为 zm 。否则页面搜索图标和QQ图标会显示出错。



版权声明:本文由江西SEOSEO原创或整理发布,欢迎分享! 更多优化知识请查看 SEO教程

本文链接:https://www.zhushuming.cn/4663.html

weinxin
博客之家
欢迎加入博客之家,本站的资源也都会上传到博客之家。当然,更多的是交流~

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  1   博主  0

    • 杰森 杰森 0

      今天测试begin主题用阿里图库 怎么文字直接跳出导航栏了