Google アイコンを使用するには、HTMLページの <head> セクション内に以下の行を追加します：
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
注: ダウンロードもインストールも必要ありません！
接頭辞 fa とアイコン名を使って Font Awesome アイコンを配置します。
次のコード：
<!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>
結果は次の通りです：
Try It Yourself »
Font Awesome は、インライン要素で使用するように設計されています。 <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>
結果は以下の通り：
Try It Yourself »
チップ: アイコンの上下が切取られた場合は、line-height を大きくします。
fa-ul and 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
Try It Yourself »
fa-border、fa-pull-right または fa-pull-left クラスは、
pull 引用符や article アイコンに使われます。
次のコード：
<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.
結果は以下の通り：
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.
Try It Yourself »
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>
結果は以下の通り：
Try It Yourself »
注: IE8 と IE9 は、CSS3 のアニメーションをサポートしていません。
fa-rotate-* and 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>
結果は以下の通り：
Try It Yourself »
複数のアイコンを重ねるには、親には 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 on fa-circle-thin
fa-twitter (inverse) on fa-circle
fa-ban on fa-camera
Try It Yourself »
fa-fw クラスは、固定幅のアイコンを設定するために使用されます。
このクラスは、いろいろなアイコンの幅を揃える時に便利です。
特に、Bootstrap の navlist や リストグループでは便利に使えます。
<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>
Try It Yourself »
Font Awesome は、全ての Bootstrap component でもよく動作します。