知更鸟Begin主题使用阿里巴巴矢量图标库Iconfont的方法

  • A+
所属分类:网站建设
国外最便宜VPS 2.5美元/月

我也是最近从5.2版本升级到lts版本之后,才开始用的阿里巴巴矢量图标库。之前一直使用的是Font Awesome。阿里巴巴矢量图标库(下文称Iconfont)相对于Font Awesome强大很多,体现在图标字体更多,体积更小,可以外链字体库。

 

1、字体图标多

之前Begin主题使用的Font Awesome字体图标数量只有600多个,选择非常的有限。如果用了特别一点的菜单名称,就很难找到匹配的图标了。但Iconfont在这篇文章发出的时候图标数量已经是二百八十万个,还在不断增加。就数量来说,就避免了很多找不到匹配图标的尴尬。

 

2、体积更小

Font Awesome不管你使用几个图标字体,都需要完整加载字体库(1M多),而Icon font可以按需定制,只加载你使用的字体库。有博主专门统计过,其实主题必须用到的字体图标大小只有100K左右。

 

3、可以外链字体库

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

 

具体的使用方法:

 

一、登录阿里巴巴矢量图标库(Iconfont)

登录Iconfont(阿里巴巴矢量图标库)。目前Iconfont支持GitHub账号和微博账号授权登录。

 

二、新建图标库项目

主导航栏徐泽“图标管理>我的项目”,进入项目界面后,点击右上角新建项目的按钮新建一个新项目。

 

 

在弹出窗口输入相关信息,项目名称随意。需要注意的是:FontClass/Symbol前缀和Font Family两项中必须输入:zm,前后不能有空格。

 

三、往新增的项目添加图标

点击菜单上的图标库,进入一个图标库(注:主题不支持多色图标)。用鼠标选择一个图标并点击上面的购物车图标,将图标添加到购物车中。如图:

添加完需要的图标后,点击网站右上角的购物车,将购物车面板里的图标添加到之前新建的项目中。

 

点击生成代码:

 

四、加载外链字体库

在新增项目界面中点击生成代码。将生成的代码,复制到begin主题的“外观>主题选项>辅助功能>阿里巴巴矢量图标库”选项中。

进入begin主题选项→辅助功能选项卡,将复制的图标字体库链接添加到主题选项中:

五、给菜单项目添加图标字体

最后,回到Iconfont图标库中,将光标移动到图标字体上方,复制该字体图标的代码到wordpress的相应菜单项中即可。

(注意:这里是添加到菜单项目的【CSS类】,如果菜单项没有显示CSS类,可以在顶部【显示选项】里将CSS类勾选上。)

 

最后,不要忘记保存菜单。

正常主题只有菜单可以添加图标字体,漂亮的图标,会吸引浏览者去点击。如果动手能力强,你也可以修改主题模板文件,替换添加默认的图标字体。

Iconfont图标字体,有个问题就是图标字体大小不一,同一个字体库的也是如此,还有Iconfont提供了非常方便的编辑工具,可以自己调整大小,旋转等编辑操作。

注:由于Iconfont图标图标库众多,很多图标字体的代码名称都是相同的,可能会与主题默认的图标冲突,如果添加自定义图标后,发现某个图标显示为另外的其它的图标,就需要修改自定义图标代码名称:

其中Unicode(16进制)代码,比如下图这个图标的Unicode代码 e636,就与主题默认的新浪微博的图标相同随便改一个,但必须是字母e开头6以后的数字四个数字和字母组合,如图:

每次添加或者编辑了图标不要忘记点击”更新代码“,并把新的字库链接重新添加到主题选项中。

Iconfont在线图标工具,操作非常简便,上面的说明很长,其实使用很简单,只是为刚接触的用户起到引导作用,也可以制作自己的字体图标并上传到该站上使用。

当然如果你还是喜欢用Font Awesome图标,可以安装Font Awesome 4 Menus插件,之前设置的图标不会变,两者没有冲突。

Mr.Q

发表评论

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