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

2020年4月21日16:42:06 发表评论 274 次浏览

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

再使用begin lts主题之后,了解到阿里巴巴矢量图标库可以替换菜单栏图标。阿里巴巴矢量图标库(下文称 Iconfont)相对于 Font Awesome 强大很多,体现在图标字体更多,体积更小,可以外链字体库。

 

1、字体图标多

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

 

2、体积更小

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

 

3、可以外链字体库

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

 

具体的使用方法:

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

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

二、新建图标库项目

主导航栏徐泽“图标管理>我的项目”,进入项目界面后,点击右上角新建项目的按钮新建一个新项目。知更鸟 Begin 主题使用阿里巴巴矢量图标库 Iconfont 的方法知更鸟 Begin 主题使用阿里巴巴矢量图标库 Iconfont 的方法

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

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

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

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

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

已添加过的图标,会有一个虚线提示。网站右上角的购物车按钮会显示当前已添加图标的数量。添加完需要的图标后,点击网站右上角的购物车,将购物车面板里的图标添加到之前新建的项目中。

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

四、加载外链字体库

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

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

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

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

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

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

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

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

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

不要胡乱把一些图标都弄到字体库项目中,而是使用那个就添加哪个,不然会引起字体名称的冲突,而且会在一定程度上影响加载速度。

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

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

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

weinxin
小Q年
关注公众号,获取前沿分享
smallQ

发表评论

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