如何在wordpress主题中使用Font Awesome小图标

Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库。这套图标字体集几乎囊括了网页中可能用到的所有图标，除了包括 Twitter Boostrap 的默认图标外，还有社交网络图标、Web 应用程序图标和编辑器图标等等，可以免费用于商业项目。

Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。

Font Awesome使用相当广泛，而Wordpress同样使用广泛。怎么把两者结合起来来实现漂亮的小图标呢。下面我们来看看相应的教程。

Font Awesome 特性

1. 一个字体文件， 369 个图标。
2. 不需要javascript要求：更快的载入速度
3. 无限的可扩展性：可伸缩矢量图形意味着每一个图标在任何大小看起来真棒。
4. 自由免费：你可以将它应用到你的商业中。
5. CSS控制：轻松的定义图标的颜色，大小，阴影，和任何与CSS相关的特性。
6. 完美的视网膜显示：使用矢量字体，这意味着他们可以完美的显示在高分辨率显示器中
7. 为BootStrap而生：完全的兼容BootStrap新版3.0
8. 桌面友好：你可以查看字体的样式列表
9. 兼容屏幕阅读器：不像其他字体图标不兼容屏幕阅读器

Font Awesome的使用

1、下载Font Awesome，目前最新版的是4.4.0版本。把下载这来的字体上传到你的主题目录下面，把相应的font和css分别放在主题下面的font和css目录下。

2、打开你主题的functions.php文件，在合适的位置插入下面的代码，作为font awesome的css引用。

//enqueues our locally supplied font awesome stylesheet
function enqueue_our_required_stylesheets(){
wp_enqueue_style('font-awesome', get_stylesheet_directory_uri() . '/css/font-awesome.css'); 
}
add_action('wp_enqueue_scripts','enqueue_our_required_stylesheets');

当然你也可以使用官方的cdn分发地址。具体代码如下：

//enqueues our external font awesome stylesheet
function enqueue_our_required_stylesheets(){
wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'); 
}
add_action('wp_enqueue_scripts','enqueue_our_required_stylesheets');

3、一般使用

（1）使用方法是css中调用，通常使用:before 和:after来实现，样式定义的内容通过content and font-family实现。下面是一个例子：

 Settings Menu 

但如何获取图标的实际content编码呢。打开网站Font Awesome，现在任意你喜欢的图标，点击详情。得带下面的页面，箭头所指的就是图标的content代码。

（2）嵌入式html代码。

这个相对简单，在你需要添加的地方加入下面的代码即可

/*Base styles for a drop down*/.nav-list .nav-item{
display: block;
}
.nav-item .nav-link:first-child{
border-top: solid 1px #ccc;
}
.nav-item .nav-link{
display: block;
padding: 8px 12px;
background: #eee;
border: solid 1px #ccc;
border-top: 0px;
color: #333;
}
.nav-link > i {
margin-right: 10px;
}

就这么简单。希望对你使用Font Awesome有所帮助。