WordPress如何使用阿里巴巴图标库图标-去看你博客

WordPress如何使用阿里巴巴图标库图标

去看你博客 • 2018-09-16 下午6:18 • WordPress • 阅读 6147

不知道大家有没有注意到“去看你博客”导航栏文字前都带有一个小小的图标！有人问怎么去实现这个效果，今天给大家写一篇关于WordPress如何使用阿里巴巴图标库图标的文章，用于美化自己的博客！

使用Iconfont可以按你所需定制图标字体库，并且可以根据你的需要随时更改，非常的方便快捷！

开始我们的教程：

目前只支持GitHub和新浪微博账号授权登录（没有可以自行注册 :mrgreen: ）

登录后，点击上面菜单中的图标管理→我的项目，点新建项目图标新建一个图标项目：

在弹出的窗口中输入相关信息，项目名称任意。

需要注意是：

FontClass/Symbol 前缀和Font Family两项中必须输入：zm，前后不能有空格。如图：

点击菜单上的图标库，进入一个图标库（注：主题只支持单色图标）。

用鼠标选择一个图标并点击上面的购物车图标，将图标添加到临购物车中，如图：

已添加过的图标，会有个虚线框提示，右上角购物车图标上的数字，是在购物车中待添加到项目中的图标个数。

选择添加完图标，点击右上角的购物车图标，将添加在购物车中的图标添加到相应该项目中：

点击生成代码：

将生成的代码复制下来，进入begin主题选项→辅助功能选项卡，将复制的图标字体库链接添加到主题选项中：

最后不要忘记保存一下主题设置。外链字体库支持https。

如果再次添加图标，重复上面的步骤。

添加图标字体需要将菜单高级属性打开，登录WP后台→外观→菜单，进入菜单编辑管理页面，打开右上角的”显示选项“，勾选其中全部的“模块”和所有高级菜单属性，如图：

返回已建好的图标字体库页面，用鼠标复制图标代码，例如：zm-wordpress

添加到菜单项目的CSS类中，前面必须加一个zm ，最终如：zm zm-wordpress，如图：

最后保存菜单！我们就可以看到效果了！ :grin:

去看你博客原创文章，作者：去看你博客，如若转载，请注明出处：https://www.7kanni.cn/294.html