• 国庆快乐,放假三天

  • 准备增加一个免登录支付功能

  • 微信扫码登录功能已经 ok 了

  • 主题更新一下,修复了头像挂掉的问题

  • 后羿更新网站文章可能不会那么闲了

  • 不得不说,美国贴吧的界面真是难看到死

  • 看到网上新闻美国的贴吧将成为中国公司

  • 推送试试

  • 睡觉之前测试一下

  • 发现了一个非常不错的插件

在自己的WordPress中使用Font Awesome图标

WordPress 云落 5年前 (2014-10-13) 1043次浏览 5个评论
文章目录[隐藏]

在自己的WordPress中使用Font Awesome图标
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,添加如下代码

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 这个没压缩的文件,打开文件看开头的几行样式

@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 里写的就是字体文件路径,根据自己的实际情况修改之。之后将其压缩,就可以用了。

相关链接

插件下载    FontAwesome 官网


-- 完 --
在自己的WordPress中使用Font Awesome图标
扫码订阅,第一时间获得更新
微信扫码二维码,订阅我们网站的动态,另外不定时发送 WordPress 小技巧,你可以随时退订,欢迎订阅哦~

极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:在自己的WordPress中使用Font Awesome图标

极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:在自己的WordPress中使用Font Awesome图标
喜欢 (4)
云落
关于作者:
无折腾,不生活,我是一个WordPress菜鸟,一个玩淘宝的卖家,欢迎你认识我,我是云落!
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(5)个小伙伴在吐槽
  1. 博主你好,我在按照此教程设置是遇到了问题,我把这段代码复制到模板函数时总会导致后台打不开,我用的阿里百秀主题,博主有时间的话何以为我解释下吗?
    nutgeek2017-03-01 17:51 回复 Windows 10 | Chrome 51.0.2704.79
  2. 我就集成了这个,很好用的东西
    同盟源2015-02-15 19:54 回复 Windows 8.1 | Chrome 40.0.2214.111
  3. 不错,不过图标也用不了几个,yusi主题集成的应该够用了。。
    梦想网络2014-10-28 17:45 回复 未知操作系统 | Chrome 37.0.2062.120
    • 云落
      有时候可能会需要吧
      云落2014-10-29 16:48 回复 Windows 8.1 | Firefox浏览器 31.0