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

2017年9月6日19:32:18 49 15,283

之前弄过一篇同类的美化教程(阿里巴巴图标库使用方法(导航菜单添加个性图标字体)—— 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

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

      可以

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

        看看看

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

          感觉还而已,爱卡南

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

            看看

            • WAIT WAIT 2 来自天朝的朋友 谷歌浏览器 Windows 10 陕西省西安市 电信

              厉害

              • 132 132 2 来自天朝的朋友 谷歌浏览器 Windows 10 陕西省西安市 电信

                你好

                  • 仙踪小栈 仙踪小栈 9 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省苏州市 电信

                    @132 你好,欢迎光临仙踪小栈,希望以后常来

                  • 你好 你好 0 来自天朝的朋友 谷歌浏览器 Windows 10 陕西省西安市 电信

                    你好

                    • oscar oscar 0 谷歌浏览器 Windows 10 世界 美国加州三藩CloudFlare公司AS13335任播网络CDN全球节点(CLOUDFLARENET)(WorldAnyCast)

                      我想学习

                        • 仙踪小栈 仙踪小栈 9 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省苏州市 电信

                          @oscar 很简单,是吧。欢迎常来

                        • xichengwan xichengwan 4 来自天朝的朋友 火狐浏览器 Windows 10 河南省郑州市 联通

                          我按照网上的教程添加了代码,但是不显示,是不是主题里面没有选择器啊,需要安装选择器是吗站长

                            • 仙踪小栈 仙踪小栈 9 来自天朝的朋友 谷歌浏览器 Windows 10 江苏省苏州市 电信

                              @xichengwan 教程里面没有说要安装选择器啊,要认真看教程,一步一步,另外可以再参考《阿里巴巴图标库使用方法(导航菜单添加个性图标字体)—— WordPress美化教程》http://www.ixianzong.com/117.html

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

                              拿走了

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

                                我拿走了

                                • 天道酬勤 天道酬勤 2 来自天朝的朋友 谷歌浏览器 Windows 7 湖北省武汉市 联通

                                  学习学习

                                  • 老勇 老勇 4 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省苏州市 电信

                                    看看怎么样

                                    • 老勇 老勇 4 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省苏州市 电信

                                      怎么样

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

                                        可以的呀

                                        • 辅助俱乐部 辅助俱乐部 2 来自天朝的朋友 谷歌浏览器 Windows 10 浙江省杭州市 电信

                                          看看学习

                                          • gogo gogo 0 来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 联通

                                            学习了

                                            • sfsdsd sfsdsd 1 来自天朝的朋友 火狐浏览器 Windows 8.1 江苏省苏州市 电信

                                              就看了看健康快乐缴款记录

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

                                                很简单,是吧。欢迎常来

                                                • asnndz asnndz 0 这家伙可能用了美佬的代理 谷歌浏览器 Windows 7 世界 美国加州三藩CloudFlare公司AS13335任播网络CDN全球节点(CLOUDFLARENET)(WorldAnyCast)

                                                  找了好久的东西!