基本圖標
要使用字體真棒圖標，添加內以下行<head> HTML頁面的部分：
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
注：無需下載或安裝！
通過使用前綴把字體真棒圖標fa和圖標的名稱。
例
下面的代碼：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
</body>
</html>結果是：
字體真棒旨在與內聯元素被使用。 在<i>和<span>元素被廣泛用於圖標。
還要注意的是，如果你更改圖標的容器中，圖標更改的字體大小和顏色。 同樣的事情也適用於陰影，和其他任何被使用CSS繼承。
大圖標
的fa-lg (33% increase) ， fa-2x ， fa-3x ， fa-4x ，或fa-5x類用於增加圖標大小相對於它們的容器。
例
下面的代碼：
<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>
結果是：
Tip:如果你的圖標越來越頂部和底部砍掉，增加行高。
列表圖標
在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-spinner fa-spin"></i>List icons</li>
<li><i class="fa-li
fa fa-square"></i>List icons</li>
</ul>結果是：
- List icons
- List icons
- List icons
有邊距和拉圖標
在fa-border ， fa-pull-right或fa-pull-left類用於為上拉報價或物品的圖標。
例
下面的代碼：
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.結果是：
動畫圖標
在fa-spin類獲取任何圖標旋轉，和fa-pulse類獲取任何圖標，8步旋轉。
例
下面的代碼：
<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>
結果是：
注意：IE8和IE9不支持CSS3動畫。
旋轉和翻轉圖標
在fa-rotate-*和fa-flip-*類用於旋轉和翻轉圖標。
例
下面的代碼：
<i class="fa fa-shield"></i>
<i class="fa fa-shield
fa-rotate-90"></i>
<i class="fa fa-shield fa-rotate-180"></i>
<i class="fa fa-shield
fa-rotate-270"></i>
<i class="fa fa-shield fa-flip-horizontal"></i>
<i class="fa fa-shield fa-flip-vertical"></i>結果是：
堆積圖標
要堆疊多個圖標，使用fa-stack類的父目錄， fa-stack-1x類的規則尺寸圖標， fa-stack-2x的大圖標。
的fa-inverse類可以用來作為一種替代圖標的顏色。 您也可以大圖標類添加到父，以進一步控制大小。
例
下面的代碼：
<span class="fa-stack fa-lg">
<i class="fa fa-circle-thin
fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-circle-thin<br>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter
fa-stack-1x fa-inverse"></i>
</span>
fa-twitter (inverse) on fa-circle<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"
style="color:red;"></i>
</span>
fa-ban on fa-camera結果是：
fa-twitter (inverse) on fa-circle
fa-ban on fa-camera
固定寬度的圖標
在fa-fw類用來在一個固定的寬度設置的圖標。 當不同的圖標寬度甩開對準這個類是很有用的。 特別有用引導的navlists和列表組。
例
<div class="list-group">
<a href="#" class="list-group-item"><i
class="fa fa-home fa-fw"></i> Home</a>
<a href="#"
class="list-group-item"><i class="fa fa-book fa-fw"></i> Library</a>
<a href="#" class="list-group-item"><i class="fa fa-pencil fa-fw"></i>
Applications</a>
<a href="#" class="list-group-item"><i class="fa
fa-cog fa-fw"></i> Settings</a>
</div> 試一試» 引導
字體真棒還偉大工程的所有組件引導。