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-family: '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;
}

View Code

修改下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>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; 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