Font Awesome是一种web font,所有常用的图标都能够在这里找到,Twitter、facebook等网站也应用了这些图标。用户可以自由自定义这些图标字体,包括大小、颜色、阴影效果以及其它可以通过CSS控制的属性。它有以下的优点:



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

当然它目前也有以下缺点:

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


使用Font Awesome很简单,如下:

  1. .fa-stack {
  2.   position: relative;
  3.   display: inline-block;
  4.   width: 2em;
  5.   height: 2em;
  6.   line-height: 2em;
  7.   vertical-align: middle;
  8. }
  9. .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. <span class=”fa-stack fa-lg”>
  19.   <i class=”fa fa-square-o fa-stack-2x”></i>
  20.   <i class=”fa fa-twitter fa-stack-1x”></i>
  21. </span>

复制代码



下面是全部的Font Awesome图标:

23.png