给WordPress菜单添加图标方法

  • 5
  • 641 views
  • A+
所属分类:网站建设
这个方法基本上百度一堆,这里就不多说什么了。喜欢的大家可以尝试一下,基本上能够在市面的WP主题上使用。效果如下图

给WordPress菜单添加图标方法

实现的方法有两个

一、WP后台--插件--安装插件页面搜索:Font Awesome 4 Menus,下载安装并启用。

给WordPress菜单添加图标方法

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

给WordPress菜单添加图标方法

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

图标字体选择器名称,打开此页查看:http://fortawesome.github.io/Font-Awesome/icons/

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

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

只需在菜单CSS类中输入fa fa-home就可以了。

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

如果认为上面插件提供的图标字体不符合自己的要求(其实这套Font Awesome图标字体早已烂大街),还可以自己做一套更加个性化的图标字体。

图标字体在线制作:https://icomoon.io/app/#/select

当时我在弄的时候,发现必须两者同时使用才可以。

还有一张代码的方式添加的,这里也就不说了。。

 

  • 我的微信订阅号
  • 我的微信公众号扫一扫
  • weinxin
  • 我的微博
  • 我的微博号扫一扫
  • weinxin
小骚斌

发表评论

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

目前评论:5   其中:访客  3   博主  2

    • avatar 2322222 0
      UC Browser 6.2.3831.3 UC Browser 6.2.3831.3 Windows 10 x64 Edition Windows 10 x64 Edition

      轮了你今年叫你

      • 小骚斌 小骚斌 Admin
        UC Browser 6.2.3831.3 UC Browser 6.2.3831.3 Windows 10 x64 Edition Windows 10 x64 Edition

        评论测试

        • avatar 灰常记忆 2
          Google Chrome 55.0.2883.87 Google Chrome 55.0.2883.87 Windows 7 x64 Edition Windows 7 x64 Edition

          以前折腾过这个,换了主题也就安静了。

            • 小骚斌 小骚斌 Admin
              UC Browser 6.2.3831.3 UC Browser 6.2.3831.3 Windows 10 x64 Edition Windows 10 x64 Edition

              这些东西也就是提升了网站的美化摆了

              @灰常记忆

            • avatar 历史趣谈 1
              Google Chrome 58.0.3029.81 Google Chrome 58.0.3029.81 Windows 7 Windows 7

              这个很不错,谢谢博主分享