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

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

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

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

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

一、下载上传

下载地址

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

二、主题集成

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

//集成图标字体功能 
include("awesome/main.php");

最后保存即可。

三、图标使用

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

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

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

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

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

<i class="fa fa-weixin"></i>

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

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

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

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

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

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

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

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

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

看来你的 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 前面引入字体和公用样式代码记得要保留，如下所示

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.fa {
 display: inline-block;
 font: normal normal normal 14px/1 FontAwesome;
 font-size: inherit;
 text-rendering: auto;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 transform: translate(0, 0);
}

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