fontawesome圖標(biāo)提供豐富的矢量字體圖標(biāo)—通過(guò)CSS可以任意控制所有圖標(biāo)的大小 面哥，顏色，陰影颊埃。

Font Awesome特性
479個(gè)圖標(biāo)：只需一種字體仁讨，同時(shí)擁有多個(gè)圖標(biāo)
無(wú)需JavaScript：Font Awesome不依賴于JS随珠，同時(shí)中文版Font Awesome提供了IE7+以上兼容性解決方案
可無(wú)限放大縮小，使用和普通字體一樣自由便捷,可任意縮放
完全免費(fèi)：完全免費(fèi)猬错，可以用于商業(yè)用途
CSS可控性：通過(guò)CSS可以任意控制所有圖標(biāo)的大小 窗看，顏色，陰影倦炒。
完全兼容視網(wǎng)膜屏：由于fontawesome是矢量字體显沈，可以完全兼容視網(wǎng)膜屏
良好兼容性：能和Bootstrap等常用UI框架一起使用，奧森（Font Awesome中文）兼容IE7+
桌面應(yīng)用：可以用于桌面應(yīng)用中
兼容屏幕閱讀器：不像其它字體那樣逢唤， 它可以兼容屏幕閱讀器

引入fontawesome以后拉讯，你可以把<i>標(biāo)簽用在各個(gè)地方！(復(fù)制以下代碼到你的html里)

1.基本圖標(biāo)：

<i class="fa fa-camera-retro"></i> fa-camera-retro

效果圖如下：

one.jpg

你可以通過(guò)css控制圖標(biāo)的font-size,color,陰影等

2.Larger Icons：你可以使用 fa-lg (增加33%), fa-2x, fa-3x, fa-4x, or fa-5x 這些類等比縮放圖標(biāo)大小.

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

效果圖如下：

two.jpg

如果發(fā)現(xiàn)圖標(biāo)上下有被隱藏的情況鳖藕，你可以通過(guò)適當(dāng)增加 line-height來(lái)解決.

3.固定寬度圖標(biāo)：使用 fa-fw可以固定圖標(biāo)寬度

<div class="list-group"> 
  <a class="list-group-item" href="#">
    <i class="fa fa-home fa-fw"></i>  Home
  </a> 
  <a class="list-group-item" href="#">
    <i class="fa fa-book fa-fw"></i>  Library
  </a> 
  <a class="list-group-item" href="#">
    <i class="fa fa-pencil fa-fw"></i>  Applications
  </a> 
  <a class="list-group-item" href="#">
    <i class="fa fa-cog fa-fw"></i>  Settings
  </a> 
</div>

效果圖如下：

three.jpg

4.列表圖標(biāo)：使用 fa-ul and fa-li 如下

<ul class="fa-ul"> 
  <li>
    <i class="fa-li fa fa-check-square"></i>List icons
  </li> 
  <li>
    <i class="fa-li fa fa-check-square"></i>can be used
  </li> 
  <li>
    <i class="fa-li fa fa-spinner fa-spin"></i>as bullets
  </li> 
  <li>
    <i class="fa-li fa fa-square"></i>in lists
  </li> 
</ul>

效果圖如下：

four.jpg

5.有邊框 & 漂浮 圖標(biāo)：fa-border 和 pull-right 或者 pull-left 組合使用

<i class="fa fa-quote-left fa-3x pull-left fa-border"></i>
...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning— So we beat on, boats against the
current, borne back ceaselessly into the past.

效果圖如下：

five.jpg

6.旋轉(zhuǎn)圖標(biāo)：fa-spin 和 fa-spinner, fa-refresh, fa-cog組合

<i class="fa fa-spinner fa-spin"></i> 
<i class="fa fa-circle-o-notch fa-spin"></i> 
<i class="fa fa-refresh fa-spin"></i> 
<i class="fa fa-cog fa-spin"></i>

效果圖如下：

five.jpg

以下代碼只支持IE10+7.翻轉(zhuǎn)圖標(biāo)

<i class="fa fa-shield"></i> normal<br> 
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br> 
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br> 
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br> 
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br> 
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical

效果圖如下：

six.jpg

8.疊加圖標(biāo)

<span class="fa-stack fa-lg"> 
  <i class="fa fa-square-o fa-stack-2x"></i> 
  <i class="fa fa-twitter fa-stack-1x"></i> 
</span>fa-twitter on fa-square-o<br> 
<span class="fa-stack fa-lg"> 
  <i class="fa fa-circle fa-stack-2x"></i> 
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i> 
</span>fa-flag on fa-circle<br> 
<span class="fa-stack fa-lg"> 
  <i class="fa fa-square fa-stack-2x"></i> 
  <i class="fa fa-terminal fa-stack-1x fa-inverse"></i> 
</span>fa-terminal on fa-square<br> 
<span class="fa-stack fa-lg"> 
  <i class="fa fa-camera fa-stack-1x"></i> 
  <i class="fa fa-ban fa-stack-2x text-danger"></i> 
</span>fa-ban on fa-camera

效果圖如下：

seven.jpg