WordPress图标字体插件font-awesome代码版-升级字体

本文最后更新于:2018-01-31 11:42 如已失效或需要修正，请您留言！ 2204 0 BaiDu已收录 评论留言

一、下载上传

---

下载地址:http://pan.baidu.com/s/1qWy4Pje密码：if3n

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

二、主题集成

---

编辑WordPress当前主题目录下functions.php文件添加如下代码：

include("font-awesome/main.php"); 

注：集成图标字体功能,新版字体包里已经包含了调用文件；文件夹版本号需要删除
最后保存即可。

三、图标使用

---

图标字体的使用，相信大部分小伙伴都已经熟知了。对于首次使用的用户，还是继续介绍下好了！ 先贴一下效果截图，了解一下图标字体是个什么东东：

其实，就是在需要的位置显示一个图标而已。而这一切由 CSS+fonts 来实现，即图标字体。 理论上，图标字体可以用在网站的任意位置，只需要用 i 标签加class来添加即可。 比如我要加入微信图标，我只要在需要显示的位置添加如下标签即可：

而我们想要更多的图标或代码，就需要到官方的图标库里面去查找了：
http://fortawesome.github.io/Font-Awesome/icons/

找到自己中意的图标后，点击打开即可得到相应的标签class了！
那如何使用到 WordPress 导航菜单呢？
很简单，依次打开 WordPress 后台==>外观==>菜单，然后点开已有菜单，将得到的class填入到CSS类即可，比如我在官方图标库查到“家”图标的class是 fa fa-home，所以我如下填写：

保存之后，WordPress 导航菜单上的【首页】前面就会出现一个“家”的图标了。
如果发现点开菜单没有 CSS 类栏位怎么办？
很明显，你没把这个功能开出来。点击菜单页面右上方的【显示选项】，勾上CSS类即可：

如果发现点击【显示选项】没动静怎么办？
看来你的WordPress也是升级4.2或4.3了。解决办法见之前的分享【修复WordPress更新后的故障】

四、更多折腾

---

好了， 做完上面的操作后，就可以彻底删除 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);}

本文方法来自：张戈博客https://zhangge.net/5053.html,本站只是升级字体版本。

wordpress检测是否存在恶意代码的方法 WordPress 4.4 RC 发布