基本的なアイコン
フォント恐ろしいアイコンを使用するには、内部に次の行を追加します<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> »それを自分で試してみてください ブートストラップ
フォント恐ろしいはまた、すべてのブートストラップの構成要素との素晴らしい作品。