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

1.到官網高低載最新版本的Font Awesome.

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

3.在須要應用的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（）中的路徑是不是當前與當前項目標實際路徑向匹配。

4.最后在頁面中參加響應的html元素，并且遵守font awesome定義好的樣式為須要添加矢量圖標的元素指定樣式。：

<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連絡可以達到更好的結果。