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

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完美兼容

1. 2、要想用fontawesome，需要引入相关的字体文件，增加了网页大小在HTML中使用Font Awesome也很简单，如下：
2. 在HTML中使用Font Awesome也很简单，如下：
   

3. .fa-stack {
     position: relative;
     display: inline-block;
     width: 2em;
     height: 2em;
     line-height: 2em;
     vertical-align: middle;
   }
   .fa-lg {
     font-size: 1.33333333em;
     line-height: 0.75em;
     vertical-align: -15%;
   }
   #这里显示的是Google plus和twitter的图标  \f0d4  \f081
    
   #这里显示两个图标合并的样式    

   下面是全部的Font Awesome图标：

   • "\f000"
   • "\f001"
   • "\f002"
   • "\f003"
   • "\f004"
   • "\f005"
   • "\f006"
   • "\f007"
   • "\f008"
   • "\f009"
   • "\f00a"
   • "\f00b"
   • "\f00c"
   • "\f00d"
   • "\f00e"
   • "\f010"
   • "\f011"
   • "\f012"
   • "\f013"
   • "\f014"
   • "\f015"
   • "\f016"
   • "\f017"
   • "\f018"
   • "\f019"
   • "\f01a"
   • "\f01b"
   • "\f01c"
   • "\f01d"
   • "\f01e"
   • "\f021"
   • "\f022"
   • "\f023"
   • "\f024"
   • "\f025"
   • "\f026"
   • "\f027"
   • "\f028"
   • "\f029"
   • "\f02a"
   • "\f02b"
   • "\f02c"
   • "\f02d"
   • "\f02e"
   • "\f02f"
   • "\f030"
   • "\f031"
   • "\f032"
   • "\f033"
   • "\f034"
   • "\f035"
   • "\f036"
   • "\f037"
   • "\f038"
   • "\f039"
   • "\f03a"
   • "\f03b"
   • "\f03c"
   • "\f03d"
   • "\f03e"
   • "\f040"
   • "\f041"
   • "\f042"
   • "\f043"
   • "\f044"
   • "\f045"
   • "\f046"
   • "\f047"
   • "\f048"
   • "\f049"
   • "\f04a"
   • "\f04b"
   • "\f04c"
   • "\f04d"
   • "\f04e"
   • "\f050"
   • "\f051"
   • "\f052"
   • "\f053"
   • "\f054"
   • "\f055"
   • "\f056"
   • "\f057"
   • "\f058"
   • "\f059"
   • "\f05a"
   • "\f05b"
   • "\f05c"
   • "\f05d"
   • "\f05e"
   • "\f060"
   • "\f061"
   • "\f062"
   • "\f063"
   • "\f064"
   • "\f065"
   • "\f066"
   • "\f067"
   • "\f068"
   • "\f069"
   • "\f06a"
   • "\f06b"
   • "\f06c"
   • "\f06d"
   • "\f06e"
   • "\f070"
   • "\f071"
   • "\f072"
   • "\f073"
   • "\f074"
   • "\f075"
   • "\f076"
   • "\f077"
   • "\f078"
   • "\f079"
   • "\f07a"
   • "\f07b"
   • "\f07c"
   • "\f07d"
   • "\f07e"
   • "\f080"
   • "\f081"
   • "\f082"
   • "\f083"
   • "\f084"
   • "\f085"
   • "\f086"
   • "\f087"
   • "\f088"
   • "\f089"
   • "\f08a"
   • "\f08b"
   • "\f08c"
   • "\f08d"
   • "\f08e"
   • "\f090"
   • "\f091"
   • "\f092"
   • "\f093"
   • "\f094"
   • "\f095"
   • "\f096"
   • "\f097"
   • "\f098"
   • "\f099"
   • "\f09a"
   • "\f09b"
   • "\f09c"
   • "\f09d"
   • "\f09e"
   • "\f0a0"
   • "\f0a1"
   • "\f0f3"
   • "\f0a3"
   • "\f0a4"
   • "\f0a5"
   • "\f0a6"
   • "\f0a7"
   • "\f0a8"
   • "\f0a9"
   • "\f0aa"
   • "\f0ab"
   • "\f0ac"
   • "\f0ad"
   • "\f0ae"
   • "\f0b0"
   • "\f0b1"
   • "\f0b2"
   • "\f0c0"
   • "\f0c1"
   • "\f0c2"
   • "\f0c3"
   • "\f0c4"
   • "\f0c5"
   • "\f0c6"
   • "\f0c7"
   • "\f0c8"
   • "\f0c9"
   • "\f0ca"
   • "\f0cb"
   • "\f0cc"
   • "\f0cd"
   • "\f0ce"
   • "\f0d0"
   • "\f0d1"
   • "\f0d2"
   • "\f0d3"
   • "\f0d4"
   • "\f0d5"
   • "\f0d6"
   • "\f0d7"
   • "\f0d8"
   • "\f0d9"
   • "\f0da"
   • "\f0db"
   • "\f0dc"
   • "\f0dd"
   • "\f0de"
   • "\f0e0"
   • "\f0e1"
   • "\f0e2"
   • "\f0e3"
   • "\f0e4"
   • "\f0e5"
   • "\f0e6"
   • "\f0e7"
   • "\f0e8"
   • "\f0e9"
   • "\f0ea"
   • "\f0eb"
   • "\f0ec"
   • "\f0ed"
   • "\f0ee"
   • "\f0f0"
   • "\f0f1"
   • "\f0f2"
   • "\f0a2"
   • "\f0f4"
   • "\f0f5"
   • "\f0f6"
   • "\f0f7"
   • "\f0f8"
   • "\f0f9"
   • "\f0fa"
   • "\f0fb"
   • "\f0fc"
   • "\f0fd"
   • "\f0fe"
   • "\f100"
   • "\f101"
   • "\f102"
   • "\f103"
   • "\f104"
   • "\f105"
   • "\f106"
   • "\f107"
   • "\f108"
   • "\f109"
   • "\f10a"
   • "\f10b"
   • "\f10c"
   • "\f10d"
   • "\f10e"
   • "\f110"
   • "\f111"
   • "\f112"
   • "\f113"
   • "\f114"
   • "\f115"
   • "\f118"
   • "\f119"
   • "\f11a"
   • "\f11b"
   • "\f11c"
   • "\f11d"
   • "\f11e"
   • "\f120"
   • "\f121"
   • "\f122"
   • "\f122"
   • "\f123"
   • "\f124"
   • "\f125"
   • "\f126"
   • "\f127"
   • "\f128"
   • "\f129"
   • "\f12a"
   • "\f12b"
   • "\f12c"
   • "\f12d"
   • "\f12e"
   • "\f130"
   • "\f131"
   • "\f132"
   • "\f133"
   • "\f134"
   • "\f135"
   • "\f136"
   • "\f137"
   • "\f138"
   • "\f139"
   • "\f13a"
   • "\f13b"
   • "\f13c"
   • "\f13d"
   • "\f13e"
   • "\f140"
   • "\f141"
   • "\f142"
   • "\f143"
   • "\f144"
   • "\f145"
   • "\f146"
   • "\f147"
   • "\f148"
   • "\f149"
   • "\f14a"
   • "\f14b"
   • "\f14c"
   • "\f14d"
   • "\f14e"
   • "\f150"
   • "\f151"
   • "\f152"
   • "\f153"
   • "\f154"
   • "\f155"
   • "\f156"
   • "\f157"
   • "\f158"
   • "\f159"
   • "\f15a"
   • "\f15b"
   • "\f15c"
   • "\f15d"
   • "\f15e"
   • "\f160"
   • "\f161"
   • "\f162"
   • "\f163"
   • "\f164"
   • "\f165"
   • "\f166"
   • "\f167"
   • "\f168"
   • "\f169"
   • "\f16a"
   • "\f16b"
   • "\f16c"
   • "\f16d"
   • "\f16e"
   • "\f170"
   • "\f171"
   • "\f172"
   • "\f173"
   • "\f174"
   • "\f175"
   • "\f176"
   • "\f177"
   • "\f178"
   • "\f179"
   • "\f17a"
   • "\f17b"
   • "\f17c"
   • "\f17d"
   • "\f17e"
   • "\f180"
   • "\f181"
   • "\f182"
   • "\f183"
   • "\f184"
   • "\f185"
   • "\f186"
   • "\f187"
   • "\f188"
   • "\f189"
   • "\f18a"
   • "\f18b"
   • "\f18c"
   • "\f18d"
   • "\f18e"
   • "\f190"
   • "\f191"
   • "\f192"
   • "\f193"
   • "\f194"
   • "\f195"
   • "\f196"