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

 2015-07-02 08:04:47  1,404 人阅读  13 条评论

投放广告联系   诚邀合作伙伴   赞助我们   公告栏   赞助光荣榜

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

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

文中技术来源:知更鸟

如果文章对你有帮助,请赞赏支持boke112导航发展!

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

文件下载

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

WordPress/zblogPHP免费响应式博客主题Blogs

 发表评论


  1. 同乐城体育资讯
    同乐城体育资讯 【小白】 @回复

    为什么用了之后,字体不显示了,就只剩下图标

  2. 笑笑笑
    笑笑笑 【小白】 @回复

    普及很不错了,很灵活

  3. 小宋日志
    小宋日志 【尚书】 @回复

    不错,我用上了。多谢你的文章。

  4. JACK的机器人
    JACK的机器人 【丞相】 @回复

    这个个性字体确实挺实用,JACK的机器人也有相关文章对这个进行过使用介绍 [呲牙]

  5. 小宋日志
    小宋日志 【尚书】 @回复

    够详细的了。

  6. 大谋士网
    大谋士网 【状元】 @回复

    现在字体图标很流行了啊。