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

2022年4月23日网络营销备忘录评论1616字阅读2分3秒阅读模式

有不少博客的导航菜单旁边会有小图标,显得很生动。对于这样的小功能是如何实现的呢?文章源自小虾博客-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

虾叔
  • 本文由 发表于 2022年4月23日
  • 如转载请注明出处并保留链接形式:https://www.xiaoxiawz.com/yingxiao/1146.html
匿名

发表评论

匿名网友 填写信息

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