Font Awesome矢量圖標使用，主要是完全開源免費
首先分享下github地址:Font Awesome。
中文網址：Font Awesome 4.7.0 中文文檔。
官網：http://fontawesome.io
如果使用網上資源地址，直接引用就可以了。
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
如果下載資源到本地的話，需要註意一點，就是保持css文件和fonts文件相對路徑保持不變。
如果矢量圖沒有出現的話可以修改css文件
@font-face { font-familyView Code: ‘FontAwesome‘; src: url(‘../fonts/fontawesome-webfont.eot?v=4.7.0‘); src: url(‘../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0‘) format(‘embedded-opentype‘), url(‘../fonts/fontawesome-webfont.woff2?v=4.7.0‘) format(‘woff2‘), url(‘../fonts/fontawesome-webfont.woff?v=4.7.0‘) format(‘woff‘), url(‘../fonts/fontawesome-webfont.ttf?v=4.7.0‘) format(‘truetype‘), url(‘../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular‘) format(‘svg‘); font-weight: normal; font-style: normal; }
修改下src的路徑就可以了。
另外還要註意的是，新版本的Font Awesome 開始不支持IE7了。
下面記錄下使用方法，雖然網上可以查的到，記錄在這裏方便查閱。
基本圖標
您可以將Font Awesome圖標使用在幾乎任何地方，只需要使用CSS前綴 fa ，再加上圖標名稱。 Font Awesome是為使用內聯元素而設計的。我們通常更喜歡使用 <i> ，因為它更簡潔。 但實際上使用 <span> 才能更加語義化。
<i class="fa fa-camera-retro"></i> fa-camera-retro
大圖標
使用 fa-lg (33%遞增)、fa-2x、 fa-3x、fa-4x，或者 fa-5x 類 來放大圖標。
<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
固定寬度
使用 fa-fw 可以將圖標設置為一個固定寬度。主要用於不同寬度圖標無法對齊的情況。 尤其在列表或導航時起到重要作用。
<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>
用於列表
使用 fa-ul 和 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>
邊框與對齊
使用 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.
動畫
使用 fa-spin 類來使任意圖標旋轉，現在您還可以使用 fa-pulse 來使其進行8方位旋轉。尤其適合 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> <i class="fa fa-spinner fa-pulse"></i>
旋轉與翻轉
使用 fa-rotate-* 和 fa-flip-* 類可以對圖標進行任意旋轉和翻轉。
<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
組合使用
如果想要將多個圖標組合起來，使用 fa-stack 類作為父容器， fa-stack-1x 作為正常比例的圖標， fa-stack-2x 作為大一些的圖標。還可以使用 fa-inverse 類來切換圖標顏色。您可以在父容器中 通過添加 大圖標 類來控制整體大小。
<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
本文參考：
http://fontawesome.dashgame.com/
http://jingyan.baidu.com/article/77b8dc7f9c5b1c6174eab605.html
Font Awesome矢量圖標使用，主要是完全開源免費