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

原创 懿古今  2015-07-02 07:54  阅读 5,003 次

目前图标字体非常流行,图标字体使用简单,与图片格式的小图标相比,支持视网膜显示,可以无限放大。特别是一些响应式设计的主题模板,都会或多或少使用图标字体,包括我模仿而成的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遇到的问题及解决办法》提供的方法解决。

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

文中技术来源:知更鸟

历史上的今天:

本文地址:http://yigujin.cn/348.html
关注我们:请关注一下我们的微信公众号:扫描二维码,公众号:aiboke112
版权声明:本文为原创文章,版权归 懿古今 所有,欢迎分享本文,转载请保留出处!

文件下载

boke112导航-免费收录独立博客

WordPress免费清新BLOG/CMS/博客导航三合一响应式主题Three
WordPress免费响应式主题:Nana

发表评论


表情

  1. 博客在线
    博客在线 【队长】 @回复

    不错,这篇文章受用了!

  2. 青檬网
    青檬网 【队长】 @回复

    终于找到这篇文章了!

  3. 雅思学习
    雅思学习 【农民】 @回复

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

  4. 电缆支架
    电缆支架 【队长】 @回复

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

  5. leveyai
    leveyai 【队长】 @回复

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

  6. 阿飞
    阿飞 【县长】 @回复

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

    • 懿古今
      懿古今【博主】2015-07-09 09:45  回复

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

  7. 李明
    李明 【镇长】 @回复

    感觉不错。

  8. 淘米纪
    淘米纪 【村长】 @回复

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

  9. 热词网
    热词网 【县长】 @回复

    这图标字体不错

  10. 硅藻泥缺点
    硅藻泥缺点 【农民】 @回复

    不错不错

  11. 天中青年
    天中青年 【市长】 @回复

    学习了,以后用用。

  12. videoclub
    videoclub 【省长】 @回复

    个性化定制自己的导航了

  13. 阿里书籍
    阿里书籍 【省长】 @回复

    呵呵 绝对的好东西

  14. 姜辰
    姜辰 【农民】 @回复

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

  15. 同盟源
    同盟源 【队长】 @回复

    对插件无爱

  16. 9yo
    9yo 【村长】 @回复

    有本地的 并不用插件

    • 懿古今
      懿古今【博主】2015-07-02 10:43  回复

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

  17. 中国历史
    中国历史 【省长】 @回复

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

  18. 咸丰人
    咸丰人 【农民】 @回复

    很是不错,感谢