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

2015年07月02日 07:54:42  阅读 7,187 次 评论 42 条

目前图标字体非常流行,图标字体使用简单,与图片格式的小图标相比,支持视网膜显示,可以无限放大。特别是一些响应式设计的主题模板,都会或多或少使用图标字体,包括我模仿而成的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
版权声明:本文为原创文章,版权归 懿古今 所有,欢迎分享本文,转载请保留出处!

文件下载

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

相关文章 分类热门分类热评随机文章

发表评论

中国赞表情摊手表情吃瓜表情笑哭表情偷笑表情衰表情汗表情思考表情费解表情抓狂表情晕表情流泪表情疑问表情嘻嘻表情吃惊表情鼓掌表情

表情

  1. 老白
    老白 @回复

    很好 支持

  2. 三少
    三少 @回复

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

  3. maqingxi
    maqingxi @回复

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

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

    不错,这篇文章受用了!

  5. 青檬网
    青檬网 @回复

    终于找到这篇文章了!

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

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

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

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

  8. leveyai
    leveyai @回复

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

  9. 阿飞
    阿飞 @回复

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

  10. 李明
    李明 @回复

    感觉不错。

  11. 淘米纪
    淘米纪 @回复

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

  12. 热词网
    热词网 @回复

    这图标字体不错

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

    不错不错

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

    学习了,以后用用。

  15. videoclub
    videoclub @回复

    个性化定制自己的导航了

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

    呵呵 绝对的好东西

  17. 姜辰
    姜辰 @回复

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

  18. 同盟源
    同盟源 @回复

    对插件无爱

  19. 9yo
    9yo @回复

    有本地的 并不用插件

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

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

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

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

  21. 咸丰人
    咸丰人 @回复

    很是不错,感谢