盒子
盒子
文章目录
  1. 安装插件Font Awesome Icons
  2. 使用代码集成
  3. 说明:

在WordPress中使用Font Awesome

制作一款漂亮的wordpress主题,我们可能会考虑找一套比较好用的图标进行整站匹配,又或许会考虑自己动手制作适合主题的网页图标。 FontAwesome是不错的选择

Font Awesome是一种矢量图标,或者叫图标字体,矢量的好处是无限缩放不会失真,可以适应各种尺寸的屏幕,省掉了做很多图片的麻烦。

安装插件Font Awesome Icons

Font Awesome Icons就是一个短小精悍的插件,功能只有两个:

  • 将Font Awesome的css和字体文件集成到WordPress
  • 提供调用图标的shortcode
    第一个是必须的,而第二个绝对是锦上添花的功能

使用代码集成

如果你要发布自己的主题,向用户提供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-x"

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

说明:

需要注意的是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里写的就是字体文件路径,根据自己的实际情况修改
官网地址 http://www.bootcss.com/p/font-awesome/#