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

我也是最近从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插件，之前设置的图标不会变，两者没有冲突。