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]

相关推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注

微信扫一扫,分享到朋友圈

WordPress中引用Font Awesome图标
返回顶部

显示

忘记密码?

显示

显示

获取验证码

Close