为网页添加图标字体——Font Awesome

2014年9月25日dbonly

原文http://www.tuicool.com/articles/J7BnUj

网页添加图标字体,有很多好处,比如说:

  1. 替代了原来的图片图标,缩减了文件大小。
  2. 引用图片次数减少,减少了http请求,提高了网页速度。
  3. 可以用css自由改变图标颜色,大小等属性,很方便。
  4. 缩放屏幕的话,图标还是依旧清晰。

网上的字体图标库很多,这里我只推荐我用过的一个—— Font Awesome

安装方法

1、从官网下载Font Awesome字体包,目前最新版是4.1.0。

2、复制安装包里面的fonts文件夹和css文件夹至自己网站文件夹根目录。

3、用编辑器打开自己的网站主页文件,一般为 index.htmlindex.php,引用刚才复制的css文件夹中的 font-awesome.css 文件或font-awesome.min.css 文件(后者为前者的压缩版,可以放在服务器上)。方法是在 <head></head> 之间输入如下代码:

<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">

4、然后就可以使用图标字体,使用时先参照官网的 图标和代码对照页面 ,然后输入相应的代码即可。举例:

我要使用Facebook的图标,只需要在相应的位置输入<i class="fa fa-facebook-square"></i> 即可。

更多地使用方法,大家可以参考这个页面: 举例

在wordpress中的引用方法

改变上述第三部的代码如下:

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_url'); ?>/css/font-awesome.min.css" />

不过前提是把fonts文件夹和css文件夹复制到WordPress主题根目录。

本站的主题即用的本文章介绍的图标字体,上次帮别人做了一个网页,也是用的这个字体库。

 

留言

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

上一篇 下一篇