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文章部分内容加密功能的实现方法

目前wordpress文章的可见性可以设置全部公开,也可以设置密码保护。但是如果是想实现文章的一部分内容加密,需要输入密码才能全部可见的话又如何实现呢? 最简单的方法莫过于使用短代码,网上很多要求关注公众号 ...

筹码力度副图及选股公式

副图指标 DRAWGBK(CLOSE>OPEN,RGB(40,40,40),RGB(40,40,40),1,2,1); NOTEXT箱底:LLV(MA((LOW+HIGH+CLOSE+OPEN)/4,6),88),COLORGREEN,LINETHICK2; X_1:=EMA((HIGH+LOW+CLOSE)/3*(HHV(HIGH,10)-CLOSE)/(HHV(HIG ...

通达信主力控盘主图指标源码

主力控盘主图指标 {阻力支撑线} V1:=ABS((2*CLOSE+HIGH+LOW)/4-EMA(CLOSE,20))/EMA(CLOSE,20); V2:=(1-7/100)*(DMA(CLOSE,V1)); V3:=(1+7/100)*(DMA(CLOSE,V1)); V5:=EMA((LOW+HIGH+CLOSE)/3,5); 支撑:REFDATE(V ...

小米ax3600官方固件安装adguardhome

小米ax3600路由器開啟SSH權限後就可以安裝插件了,目前使用最多的莫過於于shellclash+adguardhome,第一個shellclash安裝過於簡單,就一行代碼的事情,這裡就不過多贅述。adguardhome是一款非常好用的去廣告程序 ...

暂无评论

发表评论