Font Awesome:图标字体，完全CSS控制

转自：http://www.iteblog.com/archives/1099

Font Awesome是一种web font，它包含了几乎所有常用的图标，比如Twitter、facebook等等。用户可以自定义这些图标字体，包括大小、颜色、阴影效果以及其它可以通过CSS控制的属性。它有以下的优点：

1. 1、像矢量图形一样，可以无限放大
2. 2、只需一种字体，同时拥有多个图标，目前支持439个图标
3. 3、无需考虑兼容性问题，fontawesome不依赖于javascript
4. 4、通过CSS可以任意控制所有图标的大小 ，颜色，阴影。
5. 5、由于fontawesome是矢量字体，可以完全兼容视网膜屏
6. 6、能和Bootstrap等常用UI框架一起使用，良好兼容性
7. 7、可以用于桌面应用中
8. 8、不像其它字体那样， 它可以兼容屏幕阅读器。

　　它的缺点是：

1. 1、对IE6等浏览器兼容性不是很好，不过最新版本的Font Awesome和IE7完美兼容
2. 2、要想用fontawesome，需要引入相关的字体文件，增加了网页大小

　　在HTML中使用Font Awesome也很简单，如下：

01.fa-stack {

02  position: relative;

03  display: inline-block;

04  width: 2em;

05  height: 2em;

06  line-height: 2em;

07  vertical-align: middle;

08}

09.fa-lg {

10  font-size: 1.33333333em;

11  line-height: 0.75em;

12  vertical-align: -15%;

13}

14#这里显示的是Google plus和twitter的图标

15<i class="fa fa-google-plus-square"></i> \f0d4

16<i class="fa fa-twitter"></i> \f081

17 

18#这里显示两个图标合并的样式

19<span class="fa-stack fa-lg">

20  <i class="fa fa-square-o fa-stack-2x"></i>

21  <i class="fa fa-twitter fa-stack-1x"></i>

22</span>

　　下面是部分的Font Awesome图标（原文是全部）：

•