Font Awesome Icons字体图标免插件纯代码版

07 | 12 | 2018

Font Awesome Icons字体图标广泛用于导航菜单、下载按钮、文本美化中,以前介绍的是采用Better font awesome插件达到一定的效果,但它的代码方式不适用于菜单或者底部文件,而且我在使用的时候经常后台报错,虽然不影响使用,但看着总是心烦。后来在张戈博客看到了纯代码版,他本意是用在导航菜单,但我发现他这种方法几乎能用在任何地方。接下去介绍这种方法。
首先下载字体图标完整版文件,或者下载张戈提供的精简版,放到主题目录。
其次,编辑WordPress当前主题目录下 functions.php 文件,添加如下代码:

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

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

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

至于什么图标输入什么代码,可以同样在官网图标库查询。
至于导航菜单名称怎么加入字体图标,很简单,依次打开WordPress后台-外观-菜单,然后点开已有菜单,将得到的class填入到CSS类即可,比如我在官方图标库查到home图标的class是fa fa-home,所以我就在CSS类里填写fa fa-home。保存之后,WordPress导航菜单上的相关菜单前面就会出现一个home的图标了。
祝你我的网站越来越美,人气旺旺!