WordPress调用Font Awesome

  • 2017年02月12日
  • 1评

建网站过程中很让人头疼的一件事,就是网站图片在不同屏幕上的自适应问题。而且,即便解决了自适应问题,随着图片的增多,所占用的网站空间也会越来越大。

Font Awesome提供了一个解决方案,它包含249个可无损缩小放大的矢量图标图标,可以使用CSS所提供的所有特性对大小、颜色、阴影或者其它任何支持的效果进行更改。最最关键的是,无论个人还是商业使用,Font Awesome完全免费。

在WordPress中调用Font Awesome,需要做一些设置,步骤如下:

1. 从Font Awesome官方网站下载压缩包;

2. 解压压缩包。写本文时,Font Awesome版本号为3.2.1,所下载的压缩包名为“Font-Awesome-3.2.1.zip”,所解压出来的文件夹名称为“Font-Awesome-3.2.1.zip”;

3. 将解压出的文件夹改为“font-awesome”;

4. 将“font-awesome”文件夹上传至WordPress主题目录下。本博客使用的主题位于“wp-content/themes/des-note-1.3.3”,将“font-awesome”上传至“wp-content/themes/des-note-1.3.3”即可;

5. 在主题的functions.php中添加下列代码,引入font awesome的css文件:

完成设置后,就可以在写文章时调用Font Awesome。例如,若调用RSS图标,可从官网查到RSS图标的名称为“ icon-rss”,调用Wifi图标的代码为(更多代码):

文章发布后,对应位置会出现

如果想要增加图标大小,比如放大三倍,可以用下面的代码:

图标变为

官网还提供了动画旋转的使用方法。使用“icon-spin” class让任意图标旋转,在“icon-spin”和“icon-refresh”上的应用效果最好(IE7 - IE9不支持CSS3动画)。

Spinner icon when loading content...

Refresh icon when loading content...

更多细节,点击Font Awesome官方网站

1

一条回应:“WordPress调用Font Awesome”

  1. syj说道:

    我就看看,看不懂,不说话,静静看你装逼

发表评论

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

5 + 3 =