WordPress导航菜单图标字体插件font awesome 4 menus纯代码版

换成 Begin 主题之后,大伙都不约而同的给菜单用上了图标字体,确实给博客带来了一定的美化效果。

与之配套的是 font awesome 4 menus 这个图标字体插件,其实还是挺小巧的。

不过,在强迫症的眼里,能代码化就尽量不用插件吧!于是将这个插件改造成代码版,顺便精简了基本用不到的 shortcode 图标调用功能。

WordPress导航菜单图标字体插件font awesome 4 menus纯代码版

下面说一下集成到主题的方法:

一、下载上传

下载并解压后得到 awesome 文件夹,整体上传到WordPress主题目录。

二、主题集成

编辑WordPress当前主题目录下functions.php文件,在<?php  之后添加如下代码:

最后保存即可。

三、图标使用

图标字体的使用,相信大部分Begin用户都已经熟知了。对于首次使用的用户,张戈博客还是继续介绍下好了!

先贴一下效果截图,了解一下图标字体是个什么东东:

WordPress导航菜单图标字体插件font awesome 4 menus纯代码版

其实,就是在需要的位置显示一个图标而已。而这一切由 CSS+fonts 来实现,即图标字体。

 

理论上,图标字体可以用在网站的任意位置,只需要用 i 标签加class来添加即可。

比如我要加入微信图标,我只要在需要显示的位置添加如下标签即可:

而我们想要更多的图标,就需要到官方的图标库里面去查找了:

http://fortawesome.github.io/Font-Awesome/icons/

找到自己中意的图标后,点击打开即可得到相应的标签class了!

那如何使用到 WordPress 导航菜单呢?

很简单,依次打开 WordPress 后台==>外观==>菜单,然后点开已有菜单,将得到的class填入到CSS类即可,比如我在官方图标库查到“家”图标的class是 fa fa-home,所以我如下填写:

WordPress导航菜单图标字体插件font awesome 4 menus纯代码版

保存之后,WordPress 导航菜单上的【首页】前面就会出现一个“家”的图标了。

如果发现点开菜单没有 CSS 类栏位怎么办?

很明显,你没把这个功能开出来。点击菜单页面右上方的【显示选项】,勾上CSS类即可:

WordPress导航菜单图标字体插件font awesome 4 menus纯代码版

如果发现点击【显示选项】没动静怎么办?

看来你的 WordPress 也是升级4.2了。解决办法见张戈博客之前的分享【修复WordPress 4.2问题

四、更多折腾

好了, 做完上面的操作后,就可以彻底删除 font awesome 4 menus 这个插件了,强迫症们是不是又感觉轻松了一些呢?哈哈!

不过,有心的朋友可能发现了,这个图标字体的CSS文件达到20多kb,而我们真正要用的也就几个到十几个图标而已!所以,喜欢折腾的朋友可以进一步精简一下CSS文件。

打开 awesome 文件夹,编辑css文件夹下的 font-awesome.min.css 文件,删除没用到的图标css定义即可。

不过这个 font-awesome.min.css 文件是压缩后的,看起来很晕!可以先百度搜一下CSS美化工具,将其格式化之后再来编辑!

不过CSS前面引入字体和公用样式代码记得要保留,如下所示

好了,本文就分享到这里,喜欢折腾的朋友可以试试看。

文件下载

博客小广告:网络加速服务推荐(点击图片查看)

网络加速

发表评论

gravatar

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

刷新评论

目前评论:28   其中:访客  23   博主  5

  1. 香港云主机 3 来自天朝的朋友 谷歌浏览器 Windows 7 重庆市 电信

    原来可以这样修改,之前一直都想改但是一直都不知道在哪里修改,对WP研究不够

  2. 最新影片 0 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省无锡市 电信

    几天没来了,还得精简,那个文件可以第三方托管,在引用不影响的把

  3. 心音乐 1 来自天朝的朋友 谷歌浏览器 Windows 7 天津市 电信IDC机房

    这缓存太厉害了吧,首页还显示有评论的,到这就看不到了。

    • 陌小雨 5 来自天朝的朋友 谷歌浏览器 Windows 7 广东省广州市 联通

      恩,从邮箱进到文章页面就可以看到,直接进入文章就是看不到的,缓存确实厉害,主要原因还是因为直接看文章后面没有类似/comment-page-1/#comment-12319的东东

      • 张戈 [博主] 来自天朝的朋友 Safari浏览器  Android 4.4.4 M463C Build/KTU84P 广东省深圳市 电信

        右下角和评论工具条都有刷新评论功能,居然没人发现和使用。

        • 心音乐 1 来自天朝的朋友 谷歌浏览器 Windows 7 天津市 电信IDC机房

          说明这个功能太不显眼了。。

          • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Windows 7 广东省广州市 电信

            主要是给自己用,没必要显眼。

  4. jquery中文手册 5 来自天朝的朋友 谷歌浏览器 Windows 7 四川省成都市 电信

    鸟哥新主题对于一般人来说贵啦一点点,如果定价低一点用的人绝对多

    • 陌小雨 5 来自天朝的朋友 谷歌浏览器 Windows 7 广东省广州市 联通

      我觉得用的人多了反而不太好,就像xiu主题,提起这个xiu主题,大多数的人的反应就是很多人用,早就烂大街啦。 :???:

  5. 陌小雨 5 来自天朝的朋友 谷歌浏览器 Windows 7 广东省广州市 联通

    这个萝卜白菜了,如果主题自带有图标字体的话,可以自己替换相关字体文件和css代码了,一句话,勤动手! :idea:

  6. 草根站长 4 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省常州市 电信

    张戈的确是技术流大师,又搜藏一篇。。

  7. 小幻 5 来自天朝的朋友 QQ浏览器  Android 4.4.4 HM 2A Build/KTU84Q 山东省济南市 移动

    话说,只要加载一下那个矢形字体不就可以了吗。。

    • 张戈 [博主] 来自天朝的朋友 Safari浏览器  Android 4.4.4 M463C Build/KTU84P 广东省深圳市 电信

      文章分享的是插件的代码版,不是每个人都听得懂你在说什么。插件一直都是有市场的,没必要钻牛角尖。

  8. aunsen 4 来自天朝的朋友 火狐浏览器 Windows 8.1 陕西省西安市 联通

    能分享下侧边栏微信图标显示二维码吗,跪求!

  9. 校赚网朱海涛 2 来自天朝的朋友 搜狗浏览器 Windows 7 江西省南昌市 电信

    张戈博客我经常来看,总是有一些有牛逼的技术

  10. 暴赚金 3 来自天朝的朋友 谷歌浏览器 Windows 7 河南省开封市 联通

    谢谢分享好文章 搜来的

  11. 草根站长 4 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省常州市 电信

    赞一个,之前我用百度sitemap插件,造成发表文章出错,坐等张大侠出代码

  12. 郑州环氧地坪 0 来自天朝的朋友 谷歌浏览器 Windows 7 河南省郑州市 电信

    好东西,已经收藏

  13. 脑精网 0 来自天朝的朋友 谷歌浏览器 Windows 7 湖南省邵阳市 电信

    写教程的都是大牛啊,不过写教程就要写得这么详细,让原本不懂操作的也能看明白了。

  14. 群伟伟博客 2 来自天朝的朋友 谷歌浏览器 Windows XP 广东省佛山市南海区 联通

    群伟伟博客前来支持下,欢迎博主回访,同时也欢迎各大博主前来我的网站做客,你懂得。

  15. zone 1 来自天朝的朋友 谷歌浏览器 Windows 7 山东省临沂市 联通

    真给力,已经用上了,谢谢博主! :wink:

  16. 八卦吧 1 来自天朝的朋友 搜狗浏览器 Windows XP 湖北省 电信

    真心好东西,谢谢分享了。

  17. 凡哥 1 来自天朝的朋友 谷歌浏览器 Windows 7 重庆市 电信

    下载并解压后得到 awesome 文件夹,整体上传到WordPress主题目录。

    具体是哪个目录下面呢。我都试了一遍了。没反应

    • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Mac OS X 10_11_3 广东省深圳市 电信

      放到主题目录,begin主题就放到begin文件夹下
      并不是放了就有效果,麻烦仔细看文章,按照文章做。

  18. 凡哥 1 来自天朝的朋友 谷歌浏览器 Windows 7 重庆市 电信

    是知更鸟这个模板目录下面么?但是我我放也不好使。调用函数也放好了

加载中,请稍候...