FontAwesomeのアイコンを等幅にして見栄えをよくする方法

タイトルにも書いた通り。

FontAwesome のアイコン幅のせいで見栄えが悪いことがありました。

でもその解決策が分かったので、
FontAwesomeでアイコンを等幅にする方法＆CSSコードを紹介します。

このページの目次

アイコンの幅が揃ってないと超見栄え悪い！
解決策１．等幅専用のクラス名を付与する
解決策２．独自CSSと独自クラスで等幅にする
ここまでのまとめ

アイコンの幅が揃ってないと超見栄え悪い！

自分がこのトラブルに遭遇したのは、リストを作っていた時・・・

次みたいな感じで　アイコン＋テキストの ulリストを作っていました。

▼ 実際のHTML例

<ul style="list-style:none;">
<li><i class="fas fa-crow"></i> BIRD</li>
<li><i class="fas fa-dog"></i> DOG</li>
<li><i class="fas fa-cat"></i> CAT</li>
<li><i class="fas fa-horse"></i> HORSE</li>
</ul>

<li> HORSE</li>

</ul>

するとできあがったのが、次みたいなリスト

う～～～ん、なんとなく見栄えが悪い

その理由を考えてみると、テキスト部分が揃ってないからですね。

次画像のように一番左と一番右のアイコンを赤線・青線で比べると分かりやすいです。

▼ 各アイコン幅が違うから、テキストが揃わない

アイコン幅が揃ってないから、テキストの部分もなんかガタガタしてます。

そう気づいたので、いい方法がないか考えてみることにしました。

その解決策として思いついたのが、次の2つです。

解決策１．等幅専用のクラス名を付与する

１つめの解決策は等幅専用のクラス名を付与すること

FontAwesomeには fa-fw というクラス名が用意されてます。

それを各アイコンに付与するのが一番簡単な解決方法かもしれません。

たとえば先ほどのHTMLだったら、次のように改造すればOK

<ul style="list-style:none;">
<li><i class="fas fa-crow fa-fw"></i> BIRD</li>
<li><i class="fas fa-dog fa-fw"></i> DOG</li>
<li><i class="fas fa-cat fa-fw"></i> CAT</li>
<li><i class="fas fa-horse fa-fw"></i> HORSE</li>
</ul>

<li> HORSE</li>

</ul>

全てのアイコンに fa-fw を追加するだけ

▼ 実際にアイコン幅を揃えたリストはこんな感じ

FontAwesome4.0以降なら fa-fw は必ず使えるので、
最新版の FontAwesome を使っているならこの方法がいいかもです。

解決策２．独自CSSと独自クラスで等幅にする

お次は独自CSSを追加して等幅にするやり方

もし次の条件に当てはまるなら、コチラの方が便利かもしれません。

FontAwesome3.0未満を使っている
Icomoonでアイコン表示している
HTMLをできるだけ改変したくない

特に Icomoon とかのWebフォントサービスを使ってるなら、コッチが有効だと思います。

やり方は次のようなCSSを追加してあげるだけ

▼ アイコンを等幅にするCSS例

[class^="fa-"], [class^="fa-"], 
[class*=" fa-"], [class*=" fa-"],
[class^="icon-"], [class^="icon-"], 
[class*=" icon-"], [class*=" icon-"]{
  display: inline-block;
  width: 1.25em;
  text-align: center;
}

[class^="fa-"], [class^="fa-"],

[class*=" fa-"], [class*=" fa-"],

[class^="icon-"], [class^="icon-"],

[class*=" icon-"], [class*=" icon-"]{

display: inline-block;

width: 1.25em;

text-align: center;

}

ここでは width: 1.25rem; として実際のアイコンサイズより大きくし、
さらに text-align: center; を付けてアイコン自体を中央表示にしてるだけです。

そして次の条件を持つ要素に、そのCSSを適用しています。