Font Awesomeの標準設定されているスタイルを利用する

AipoサイトではFont Awesomeの前のバージョン 3.2.1 を利用しています。
ですがアイコンを単体で利用してばかりで、Examplesの利用方法に最近気が付きましたので特に使えそうだと思ったものを書き留めておきたいと思います。 Version 3.2.1と、現時点で最新版の Version 4.0.3 ではclass名が変わっていますのでご注意ください。

アイコンの幅を揃える

普通にアイコンの隣にテキストを並べるだけだと、テキストの始まりががたがたになってしまいます。そこで下記のようにicon-fixed-widthを付けることでテキストの開始位置を揃えることができます。（Version 4.0.3ではfa-fw）

<i class="icon-wrench icon-fixed-width"></i> ソーシャルアプリ<br>
<i class="icon-bookmark icon-fixed-width"></i> ドキュメント<br>
<i class="icon-pencil icon-fixed-width"></i> ブログ

表示サンプル

ソーシャルアプリ
ドキュメント
ブログ

アイコンを重ねる

アイコンを重ねたい場合はいずれも重ねたいアイコンをicon-stackで括ります。（Version 4.0.3ではfa-stack）

下のアイコンに上のアイコンを収める

下に置きたい方のアイコンを先に記述し、icon-stack-baseを追加します。（Version 4.0.3では 大きくしたい方にfa-stack-2x、一回り小さくしたい方にfa-stack-1xを設定します。）
上に重ねたいアイコンの色を適宜変更します。icon-lightだと白色になります。

<span class="icon-stack">
  <i class="icon-cloud icon-stack-base"></i>
  <i class="icon-arrow-down icon-light"></i>
</span>

表示サンプル

下のアイコンを上のアイコンで覆う

上に置きたい方のアイコンを後に記述し、icon-stack-baseを追加します。（Version 4.0.3では 大きくしたい方にfa-stack-2x、一回り小さくしたい方にfa-stack-1xを設定します。）

<span class="icon-stack">
  <i class="icon-camera"></i>
  <i class="icon-ban-circle icon-stack-base"></i>
</span>

表示サンプル