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


原文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> 之间输入如下代码:

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

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

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

在wordpress中的引用方法

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

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

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

 

声明:豆瓣不小心|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 为网页添加图标字体——Font Awesome


Don't Worry,Be Happy!