为WordPress主题导航菜单添加个性图标字体

 懿古今   2016-04-14 17:25:22 更新  技术文档

目前图标字体非常流行,图标字体使用简单,与图片格式的小图标相比,支持视网膜显示,可以无限放大。特别是一些响应式设计的主题模板,都会或多或少使用图标字体,包括我模仿而成的MFBegin主题,除了主题集成的图标字体,我们还可以单独为导航菜单上的项目也配上个性化的图标字体。

具体方法:

一、WP后台--插件--安装插件页面搜索:Font Awesome 4 Menus,下载安装并启用,也可以直接在本站下载,然后上传安装或解压后通过FTP上传。

二、打开图标字体官网,找到我们所需要的图标,然后记录下来,如首页图标的名称是home,那么我们就需要在菜单CSS类中输入fa fa-home就可以了,其他图标也是同样的办法(也可以直接点击该图标后在出现的页面中的<i class="fa fa-home"></i>复制fa fa-home)。

个性化图标字体|懿古今

三、WP后台---外观---菜单,进入菜单设置页面,选择并编辑一个菜单项,在CSS类中输入我们刚才记录下来的图标字体名称(如首页就输入fa fa-home),保存即可。

导航菜单添加个性化图标|懿古今

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

wordpress显示选项|懿古今

注:WordPress 4.2+版本有BUG,无法打开右上角的“显示选项”,可参阅《亲测WordPress升级4.2遇到的问题及解决办法》提供的方法解决。

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

文中技术来源:知更鸟

本文地址:https://www.yigujin.cn/348.html

你可能感兴趣的文章

文章标签: ,  
版权声明:本文为原创文章,版权归 懿古今 所有,欢迎分享本文,转载请保留出处!发布此文是出于传递更多信息之目的,若有来源标注错误或侵犯了您的合法权益,请发邮件至[email protected],确认后马上更正、删除,谢谢!

文件下载

boke112导航_独立博客导航平台

发表评论

  1. 咸丰人
    咸丰人 @回复

    很是不错,感谢

    • 懿古今
      懿古今2015-07-02 10:06  回复

      @咸丰人[呲牙] 个人觉得有了这小图标后感觉比较好

  2. 中国历史
    中国历史 @回复

    这个不需要新版本的wp就可以支持吧

    • 懿古今
      懿古今2015-07-02 10:42  回复

      @中国历史这个是一个插件,跟WordPress版本没有关系的,因为它是一种字体

  3. 9yo
    9yo @回复

    有本地的 并不用插件

    • 懿古今
      懿古今2015-07-02 10:43  回复

      @9yo嗯,也可以直接变成本地,这个就看自己怎么折腾了,想偷懒就直接安装插件

  4. 同盟源
    同盟源 @回复

    对插件无爱

    • 懿古今
      懿古今2015-07-02 11:08  回复

      @同盟源[呲牙] 想偷懒就这样,不过一般主题都集成有这些小图标的

  5. 姜辰
    姜辰 @回复

    不错不错,哈哈,我在想有没有emlog的?

    • 懿古今
      懿古今2015-07-02 11:08  回复

      @姜辰这个还真不懂,没接触过emlog,不过应该也会有的吧

  6. 阿里书籍
    阿里书籍 @回复

    呵呵 绝对的好东西

  7. videoclub
    videoclub @回复

    个性化定制自己的导航了

    • 懿古今
      懿古今2015-07-02 16:39  回复

      @videoclub图标可以随意选择,打造属于自己的个性化图标,挺好的

  8. 天中青年
    天中青年 @回复

    学习了,以后用用。

  9. 硅藻泥缺点
    硅藻泥缺点 @回复

    不错不错

  10. 热词网
    热词网 @回复

    这图标字体不错

    • 懿古今
      懿古今2015-07-02 21:38  回复

      @热词网[呲牙] 喜欢 建议加上,感觉高大上很多

  11. 淘米纪
    淘米纪 @回复

    这个方法不错,收藏学习了

    • 懿古今
      懿古今2015-07-04 10:02  回复

      @淘米纪有时候偷懒一点,安装插件也是一种很好的办法

  12. 李明
    李明 @回复

    感觉不错。

    • 懿古今
      懿古今2015-07-04 10:02  回复

      @李明[呲牙] 有时候主题搭配一些图标字体还是挺给力的

  13. 阿飞
    阿飞 @回复

    现在啥都流行用插件,方便实惠。 [呲牙]

    • 懿古今
      懿古今2015-07-09 09:45  回复

      @阿飞是的,WordPress强大之一就是有众多的插件可以实现很多东东

  14. leveyai
    leveyai @回复

    请问安装这个插件后,图标会下载到本地吗?因为我看这个网址是外因的服务器,如果又要从外国服务器调用,我怕影响浏览速度。

    • 懿古今
      懿古今2015-08-09 09:26  回复

      @leveyai[流汗] 图标已经在本地,那个网址只是方便我们挑选图标而已

  15. 电缆支架
    电缆支架 @回复

    现在网上的东西越来越人性化了,不像老早以前那么丑了!

  16. 雅思学习
    雅思学习 @回复

    这个插件还是很好用的,对于菜单的Icon,很有利于用户的识别。

  17. 青檬网
    青檬网 @回复

    终于找到这篇文章了!

  18. 博客在线
    博客在线 @回复

    不错,这篇文章受用了!

  19. maqingxi
    maqingxi @回复

    有些图标并不能显示,只好换一个图标。

    • 懿古今
      懿古今2017-01-23 22:03  回复

      @maqingxi个人感觉还好,只要是从那个官网获得的图标都能显示

  20. 三少
    三少 @回复

    那个导航菜单的字体大小怎么设置啊

  21. 老白
    老白 @回复

    很好 支持