怎样在WordPress使用Font Awesome字体图标方法

Font Awesome是一款矢量的图标或可以称为字体图标，矢量的好处是无限缩放不会失真，可以适应各种尺寸的屏幕，他的所有属性都可以通过CSS进行设定，包括：大小、颜色、阴影或者其它任何支持的效果。不旦有效解决了图像加载慢的问题，而且好提供了超过5000+的图标方案。

在WordPress使用到fantawesome字体图标的方式有两种。第一种呢，通过wordpress插件安装好fontawesome字体图标插件，就可以直接使用了，第二种方法就是把字体图标的文章载入到我们的wordpress主题中来，合二为一。

代码方案：

如果你要发布自己的主题，向用户提供 font awesome 作为一个卖点，下面是集成方法。

1.下载Font Awesome，将 font-asesome 文件夹直接解压到你主题的根目录下

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-home"></i> 首页

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

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

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

其它说明：

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

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

@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;
    }

url 里写的就是字体文件路径，根据自己的实际情况修改之。之后将其压缩，就可以用了。

插件方案：

大家觉得在 WordPress 中使用插件就一定会降低性能。相反，我推荐使用插件，插件小巧灵活，即插即用，不想要也可以成本很低的舍弃。只有代码质量较低的插件才会降低网站性能。Font Awesome Icons就是一个短小精悍的插件。