Font Awesome 是一套專門為 Twitter Boostrap 設(shè)計的圖標(biāo)字體庫。這標(biāo)字體集幾乎囊括了網(wǎng)頁中可能用到的所有圖標(biāo)，除了包含 Twitter Boostrap 的默認圖標(biāo)外，還有社交收集圖標(biāo)、Web 應(yīng)用法度圖標(biāo)和編輯器圖標(biāo)等等，可以免費用于貿(mào)易項目。
下面僅記錄應(yīng)用步調(diào)：

1.到官網(wǎng)高低載最新版本的Font Awesome.

2.解壓文件，將此中的css和fonts文件夾拷貝到項目中，此中css文件夾中有兩個css文件（font-awesome.css和font-awesome.min.css），fonts下有有5個，如下：

3.在須要應(yīng)用的html或者其它類型的頁面中引入樣式文件，如下：

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

4.查看font-awesome.css文件，若是引用的是緊縮版的，就要查看那個文件了，打開文件看到第一個樣式定義如下：

＠font-face {

font-family: ""FontAwesome"";

src: url（""../fonts/fontawesome-webfont.eot？v=4.1.0""）;

src: url（""../fonts/fontawesome-webfont.eot？＃iefix&v=4.1.0""） format（""embedded-opentype""）， url（""../fonts/fontawesome-webfont.woff？v=4.1.0""） format（""woff""）， url（""../fonts/fontawesome-webfont.ttf？v=4.1.0""） format（""truetype""）， url（""../fonts/fontawesome-webfont.svg？v=4.1.0＃fontawesomeregular""） format（""svg""）;

font-weight: normal;

font-style: normal;

}

必然重視此中的src:url（）中的路徑是不是當(dāng)前與當(dāng)前項目標(biāo)實際路徑向匹配。

4.最后在頁面中參加響應(yīng)的html元素，并且遵守font awesome定義好的樣式為須要添加矢量圖標(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>
<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-car"></i>
<i class="fa fa-car fa-3x"></i>

別的，font awesome 和BootStrap連絡(luò)可以達到更好的結(jié)果。