摘要：Font Awesome是一款矢量的图标或可以称为字体图标，他的所有属性都可以通过CSS进行设定，包括：大小、颜色、阴影...
Font Awesome是一款矢量的图标或可以称为字体图标，他的所有属性都可以通过CSS进行设定，包括：大小、颜色、阴影或者其它任何支持的效果。不旦有效解决了图像加载慢的问题，而且好提供了超过5000+的图标方案。
在wordpress使用到fantawesome字体图标的方式有两种。第一种呢，通过wordpress插件安装好fontawesome字体图标插件，就可以直接使用了，第二种方法就是把字体图标的文章载入到我们的wordpress主题中来，合二为一。
安装插件在wordpress插件中搜索Font Awesome 默认选择安装即可
Font Awesome Icons是一款短小精悍的插件，功能只有两个：
一、将Font Awesome的css和字体文件集成到WordPress
二、提供调用图标的shortcode
下面是关于Font Awesome代码集成的方法
关于集成也有两种方案一种是调用第三方的CDN不用占用我们自己的物理空间，直接调用第三方，方便+方便的选择。
第二种是下载官方的文件包到我们的本地然后添加到主题包内，进行手动的集成。
最简单的方式：BootstrapCDN （由MaxCDN提供）
将以下代码粘贴到网页HTML代码的
部分.|
1 |
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> |
当新版本发布时，BootstrapCDN需要一点时间来同步到最新版本。稍安勿躁 🙂
首先我们要通过官方下载到fontawesome文件包
将font-asesome文件夹直接解压到你主题的根目录下
2. 打开主题的functions.php，添加如下代码
|
1 2 3 4 5 6 7 |
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来添加，例如
|
1 |
<i class="fa fa-camera-retro fa-lg"></i> |
