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

原创 懿古今  2015-07-02  阅读 4,636 次

目前图标字体非常流行,图标字体使用简单,与图片格式的小图标相比,支持视网膜显示,可以无限放大。特别是一些响应式设计的主题模板,都会或多或少使用图标字体,包括我模仿而成的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响应式主题Nana专题文章
WordPress免费响应式主题:Nana

发表评论


表情

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

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

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

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

  3. leveyai
    leveyai 【队长】 @回复

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

    • 懿古今
      懿古今【站长】 @回复

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

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

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

    • 懿古今
      懿古今【站长】 @回复

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

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

    感觉不错。

    • 懿古今
      懿古今【站长】 @回复

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

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

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

    • 懿古今
      懿古今【站长】 @回复

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

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

    这图标字体不错

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

    不错不错

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

    学习了,以后用用。

  10. videoclub
    videoclub 【省长】 @回复

    个性化定制自己的导航了

    • 懿古今
      懿古今【站长】 @回复

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

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

    呵呵 绝对的好东西

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

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

    • 懿古今
      懿古今【站长】 @回复

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

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

    对插件无爱

    • 懿古今
      懿古今【站长】 @回复

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

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

    有本地的 并不用插件

    • 懿古今
      懿古今【站长】 @回复

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

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

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

    • 懿古今
      懿古今【站长】 @回复

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

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

    很是不错,感谢