给小虾博客增加导航菜单矢量小图标

有不少博客的导航菜单旁边会有小图标，显得很生动。对于这样的小功能是如何实现的呢？文章源自小虾博客-https://www.xiaoxiawz.com/yingxiao/1146.html

其实主要是引用了阿里巴巴旗下的iconfont矢量小图标，方法如下。文章源自小虾博客-https://www.xiaoxiawz.com/yingxiao/1146.html

登录地址[go]，你会看到一个大大的搜索框，然后输入你想要的中文或者英文，比如你想要一个“首页”的图标，你可以直接搜索“首页”或者“房子”来查找。每个图标上都有一个添加入库的购物车图标，只需点击这个图标即可将该图标收纳入库。当你觉得收纳的图标足够了的时候，你可以点击页面右上角的购物车来“添加至项目”，没有项目的话可以创建一个项目。文章源自小虾博客-https://www.xiaoxiawz.com/yingxiao/1146.html

文章源自小虾博客-https://www.xiaoxiawz.com/yingxiao/1146.html

然后你就来到了图标项目页，你可以看到刚刚选择的所有图标。在图标项目页中可以“查看在线链接”，你将得到类似下图的代码。文章源自小虾博客-https://www.xiaoxiawz.com/yingxiao/1146.html

文章源自小虾博客-https://www.xiaoxiawz.com/yingxiao/1146.html

将全部代码复制到 主题设置-自定义代码-自定义css样式 中，一般是 style.css文章源自小虾博客-https://www.xiaoxiawz.com/yingxiao/1146.html

我用的知更鸟主题，竟然发现作者早就贴心的提供了快捷设置功能。文章源自小虾博客-https://www.xiaoxiawz.com/yingxiao/1146.html

具体：进入主题选项 → 辅助功能 → 阿里图标库文章源自小虾博客-https://www.xiaoxiawz.com/yingxiao/1146.html

将复制的图标字体库CSS链接添加到单色图标链接（Font class）中，最后保存一下主题设置。文章源自小虾博客-https://www.xiaoxiawz.com/yingxiao/1146.html

文章源自小虾博客-https://www.xiaoxiawz.com/yingxiao/1146.html

添加图标字体需要将菜单高级属性打开，登录WP后台→外观→菜单，进入菜单编辑管理页面，打开右上角的”显示选项“，勾选其中全部的“模块”和所有高级菜单属性，如图：文章源自小虾博客-https://www.xiaoxiawz.com/yingxiao/1146.html

文章源自小虾博客-https://www.xiaoxiawz.com/yingxiao/1146.html

返回已建好的图标字体库页面，用鼠标复制图标代码，例如：zm-clock文章源自小虾博客-https://www.xiaoxiawz.com/yingxiao/1146.html

添加到菜单项目的CSS类中，前面必须加一个zm ，最终如：zm zm-clock，如图：文章源自小虾博客-https://www.xiaoxiawz.com/yingxiao/1146.html

文章源自小虾博客-https://www.xiaoxiawz.com/yingxiao/1146.html

以上就大功告成了，可以参考本站，感觉挺好玩的。文章源自小虾博客-https://www.xiaoxiawz.com/yingxiao/1146.html