Font Awesomeについてもろもろ

iconを重ねる

<div class-"fa-stack">
  <i></i>
  <i></i>
</div>

アイコンを重ねるためには、fa-stackを親要素に追加して、子要素に重ねるアイコンを配置します。 子要素は次のようにクラスを追加します。

• 外側に見せたいアイコン

=> fa-stack-2x(少し大きめのサイズ)

• 内側に見せたいアイコン

  => fa-stack-1x(通常サイズ)

さらに、親要素に対してアイコンのサイズを指定することで、重ねたアイコン全体のサイズを調整することができます。

<span class="fa-stack fa-3x blue">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>

文字の感覚を調整

文字とアイコンの間隔を少し広げるためには、fa-fwを使います。

リストのマーカーをアイコンに

チェックリストのリストアイコンを置き換えるためには、ulタグにfa-ulを設定して、liタグの中にあるアイコンにfa-liを設定します。

<ul class="fa-ul">
  <li><i class="fa fa-square-o fa-li"></i>チェック</li>
<ul>