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

2017年9月6日19:32:18 24 1,210

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

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

 

只需在菜单CSS类中输入

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

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

 

分类小工具添加图标字体

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

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

 

 

  • 我的QQ
  • QQ扫一扫
  • weinxin
  • 我的微信公众号
  • 微信扫一扫
  • weinxin

发表评论

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

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

    • rm -rf/ rm -rf/ 来自天朝的朋友 QQ浏览器  Android 8.1.0 DUB-AL00 Build/HUAWEIDUB-AL00 湖北省武汉市 联通 1

      可以

      • k12 k12 来自天朝的朋友 搜狗浏览器 Windows 7 江苏省苏州市 电信 1

        看看看

        • dyt5AAUI dyt5AAUI 来自天朝的朋友 谷歌浏览器 Windows 10 江苏省苏州市 电信 1

          感觉还而已,爱卡南

          • 软件库 软件库 来自天朝的朋友 谷歌浏览器 Windows 7 河南省郑州市 联通 1

            看看