为导航菜单、分类小工具添加个性图标字体 —— WordPress美化

2017年9月6日19:32:18 49 14,227

之前弄过一篇同类的美化教程(阿里巴巴图标库使用方法(导航菜单添加个性图标字体)—— WordPress美化教程),不过那个是针对知更鸟Begin5.0以上版本主题使用。今天特分享针对WordPress搭建的博客使用的添加个性图标字体的教程。

 

为导航菜单、分类小工具添加个性图标字体 —— WordPress美化

 

WP后台---外观---菜单,进入菜单设置页面,选择并编辑一个菜单项,在CSS类中输入一个图标字体选择器名称,如图:

 

为导航菜单、分类小工具添加个性图标字体 —— WordPress美化

 

注:如果在编辑菜单项目面板中无CSS类,打开右上角的“显示选项”,在显示菜单高级属性中勾选“CSS类”,如下图:

 

为导航菜单、分类小工具添加个性图标字体 —— WordPress美化

 

图标字体选择器名称 http://fontawesome.io/icons

 

点开一个认为合适的图标字体,在下会显示类似:

  1. <i class="fa fa-home"></i>

 

只需在菜单CSS类中输入

此处为隐藏的内容!
发表评论并刷新,方可查看
就可以了。

当然这个图标字体库并不只局限于使用在导航菜单上,只要把相应的图标代码加到主题模板的相应位置,也同样可以显示。

 

分类小工具添加图标字体

这篇《为导航菜单添加个性图标字体》中的方法可以为菜单添加图标字体,有童鞋要求侧边分类小工具也加上图标字体,分类小工具是无法添加图标字体的,但可以变通一下,使用自定义菜单小工具来实现。

新建一个单独的菜单(不能有二级菜单项目),然后使用自定义菜单小工具调用这个单独的菜单,图标字体添加方法同《为导航菜单添加个性图标字体》,另外,可以选择显示分类,比默认的分类目录小工具,更加灵活。

 

 

若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!

发表评论

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

目前评论:49   其中:访客  0   博主  0

    • 山锟斤拷锟斤拷 山锟斤拷锟斤拷 0 来自天朝的朋友 谷歌浏览器 Windows 10 山西省 电信

      看看

      • boring. boring. 1 来自天朝的朋友 QQ浏览器 Windows 10 中国 移动

        了解一下

        • 王小优 王小优 4 来自天朝的朋友 谷歌浏览器 Windows 10 湖南省株洲市 电信

          了解一下

          • 无心 无心 0 来自天朝的朋友 谷歌浏览器 Mac OS X Lion 10_15_7 山东省临沂市 移动

            感谢分享。。。。

            • 锟斤拷 锟斤拷 0 来自天朝的朋友 搜狗浏览器 Windows 7 江西省赣州市 移动

              看看

              • 78tnnf 78tnnf 2 来自天朝的朋友 谷歌浏览器 Windows 10 山东省 移动

                感谢分享