WordPress中引用Font Awesome图标

Font Awesome是一种矢量图标，或者叫图标字体，矢量的好处是无限缩放不会失真，可以适应各种尺寸的屏幕，省掉了做很多图片的麻烦。目前使用begin作为博客主题的人很多,想必大家都有发现在begin5.2版本中,菜单直接引用Font Awesome图标的方法失效了,如果想在begin5.2主题中使用Font Awesome,需要进行代码集成,下面介绍一下方法。

使用代码集成

1. 下载Font Awesome，将font-asesome文件夹直接解压到你主题的根目录下(只需要用到里面的fonts和css文件)

2. 打开主题的functions.php，添加如下代码

add_action('wp_enqueue_scripts','load_fontawesome_styles');
function load_fontawesome_styles(){
global $wp_styles;
wp_enqueue_style('font-awesome',get_template_directory_uri().'/font-awesome/css/font-awesome.min.css');
wp_enqueue_style('font-awesome-ie7',get_template_directory_uri().'/font-awesome/css/font-awesome-ie7.min.css');
$wp_styles->add_data('font-awesome-ie7','conditional','lte IE 7');
}

这段代码会引入font awesome主要的css文件，还会条件化加载修复ie7的css样式。

3. 大功告成，下面就是使用了，使用的方式很多，官方推荐的方法是用i标签加class来添加，例如

   <i class="fa fa-bullhorn"></i>我是一个小喇叭

当然，也可以将class应用到其它标签，就像使用字体一样，可以设定字号、颜色、阴影等属性。

<i style="font-size: 45px;" class="fa fa-bullhorn"></i>

具体使用方法可以看官方文档

其它说明

需要注意的是font-awesome的css文件和字体文件要保持对应关系，如果你更改了字体目录名称或者位置，不要忘记修改css文件。

具体说是修改font-awesome.css这个没压缩的文件，打开文件看开头的几行样式

[code]@font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot?v=3.1.0');
src: url('../font/fontawesome-webfont.eot?#iefix&v=3.1.0') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.1.0') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.1.0') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.1.0') format('svg');
font-weight: normal;
font-style: normal;
}[/code]