Font Awesome字體圖標

1.什麼是字體圖標
字體圖標是一個包含許多圖標的字體庫。
能夠理解爲一種特殊的字體，只不過裏面包含的都是圖標。

2.Font Awesome圖標字體庫
Font Awesome是目前最受歡迎最全面的圖標字體庫。
主要特色以下：
1)是一種字體，包含605個圖標(截止4.5.0版本)
2)純CSS控制，可以輕鬆定義圖標的顏色、大小、陰影及任何CSS可以實現的效果。
3)無限縮放，矢量圖標在任何尺寸下都如出一轍
4)無償使用，包括商業和非商業項目
5)兼容多瀏覽器版本

下圖是Font Awesome圖標字體庫種的部分圖標，完整圖標可訪問官網查看：

3.Font Awesome使用示例
1)首先將整個字體庫文件夾font-awesome放到工程項目中
2)在html頁面的頭部把font-awesome.min.css引進來

<link ref="stylesheet" href="font-awesome/css/font-awesome.min.css">

3)可在頁面的任何地方使用<i>標籤來使用Font Awesome字體圖標。
方法爲fa前綴+圖標名字
如使用微信圖標：

<i class="fa fa-weixin"></i>

4.font-awesome/css/font-awesome.css文件
文件的開頭是這麼一段語句：

@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face是CSS3中的一個模塊，做用是把自定義的字體嵌入到你的網頁。
該功能兼容多瀏覽器版本。

@font-face的語法以下：

@font-face {
      font-family: <YourWebFontName>;
      src: <source> [<format>][,<source> [<format>]]*;
      [font-weight: <weight>];
      [font-style: <style>];
    }

font-family：自定義字體的名稱，將被引入到相應元素的font-family
src: source:自定義字體的存放路徑;format：自定義字體的格式，是爲了兼容不一樣瀏覽器的識別。
font-weight：字體是否爲粗體
font-style：字體是否爲斜體

5.Font Awesome使用詳解
1)放大圖標尺寸
使用fa-lg, fa-2x, fa-3x, fa-4x, fa-5x 樣式能夠讓圖標相對於內容，尺寸增大33%，變成2倍，3倍，4倍，5倍。

<i class="fa fa-weixin fa-lg"></i>微信&nbsp;&nbsp;
<i class="fa fa-weixin fa-2x"></i>微信&nbsp;&nbsp;
<i class="fa fa-weixin fa-3x"></i>微信&nbsp;&nbsp;
<i class="fa fa-weixin fa-4x"></i>微信&nbsp;&nbsp;
<i class="fa fa-weixin fa-5x"></i>微信&nbsp;&nbsp;

2)固定寬度圖標
使用 fa-fw 能夠固定圖標寬度

<i class="fa fa-weixin fa-fw"></i>

3)列表圖標
使用fa-ul和fa-li能夠方便地替換list列表默認圖標
以下所示：

<ul class="fa-ul">
<li><i class="fa-li fa fa-weixin"></i>微信</li>
<li><i class="fa-li fa fa-weixin"></i>微信</li>
<li><i class="fa-li fa fa-weixin"></i>微信</li>
<li><i class="fa-li fa fa-weixin"></i>微信</li>
</ul>

4)有邊框且漂浮的圖標
使用fa-border與fa-pull-right或fa-pull-left組合使用，
能夠方便地實現引用或文章圖標。
以下所示：

<i class="fa fa-weixin fa-3x pull-left fa-border"></i>
微信是一款很火的社交軟件，騰訊公司的產品，基於內容分享。

5)圖標旋轉動畫
使用fa-spin能夠讓圖標勻速旋轉，使用fa-pulse能夠讓圖標只按8個角度旋轉。
以下所示：

<i class="fa fa-weixin fa-spin"></i>&nbsp;
<i class="fa fa-weixin fa-pulse"></i>

6)旋轉，翻轉圖標
使用fa-rotate-*和fa-flip-*能夠分別實現圖標的旋轉和翻轉
以下所示：

<i class="fa fa-weixin fa-rotate-90"></i>&nbsp;
<i class="fa fa-weixin fa-rotate-180"></i>&nbsp;
<i class="fa fa-weixin fa-rotate-270"></i>&nbsp;
<i class="fa fa-weixin fa-flip-horizontal"></i>
<i class="fa fa-weixin fa-flip-vertical"></i>

7)疊加圖標
要疊加多個圖標，使用fa-stack設置容器。fa-stack-1x表示正常大小，
fa-stack-2x表示更大的圖標，fa-inverse表示讓圖標反色。
以下所示：

<span class="fa-stack fa-1g">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-weixin fa-stack-1x"></i>
</span>