在WordPress主题中使用Font Awesome
日期： 2016-07-25 分类： 个人收藏 348次阅读
Font Awesome是一种矢量图标，或者叫图标字体，矢量的好处是无限缩放不会失真，可以适应各种尺寸的屏幕，省掉了做很多图片的麻烦。如果你想在自己的WordPress主题中使用Font Awesome，下面介绍了方法。
安装插件Font Awesome Icons
我的博客有很多代码，但今天我要把插件放在前面，不希望大家觉得在WordPress中使用插件就一定会降低性能。相反，我推荐使用插件，插件小巧灵活，即插即用，不想要也可以成本很低的舍弃。只有代码质量较低的插件才会降低网站性能。
Font Awesome Icons就是一个短小精悍的插件，功能只有两个：
- 将Font Awesome的css和字体文件集成到WordPress
- 提供调用图标的shortcode
第一个是必须的，而第二个绝对是锦上添花的功能。
使用代码集成
如果你要发布自己的主题，向用户提供font awesome作为一个卖点，下面是集成方法。
1. 下载Font Awesome，将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
=
"icon-camera-retro"
></
i
>
|
当然，也可以将class应用到其它标签，就像使用字体一样，可以设定字号、颜色、阴影等属性。
具体使用方法可以看官方文档
其它说明
需要注意的是font-awesome的css文件和字体文件要保持对应关系，如果你更改了字体目录名称或者位置，不要忘记修改css文件。
具体说是修改font-awesome.css这个没压缩的文件，打开文件看开头的几行样式
|
1
2
3
4
5
6
7
|
@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里写的就是字体文件路径，根据自己的实际情况修改之。之后将其压缩，就可以用了。
除特别声明，本站所有文章均为原创，如需转载请以超级链接形式注明出处：SmartCat's Blog
精华推荐