【CSS】FontAwesomeのアイコンの幅を揃える小技

無料で使えるありがたーいアイコンフォント「FontAwesome」。

ちょっとしたワンポイントなどに超便利なので、私も普段からお世話になっているのですが……。

HTMLからアイコンフォントをリストの先頭に表示したとき、幅が揃わずガタガタした表示になってしまいました。

ここでは、アイコンフォントをきっちり揃えるワンポイント小技をまとめています。

アイコンの幅を揃えるには？

まずは、問題の表示。

アイコンの幅が揃わず、ガタガタしていますね。

これを……こうする方法を見ていきましょう。

CSS3行で、きっちり幅を揃える事ができます。

HTMLの記述

まずはHTMLでの記述を見てみましょう。

<ul>
  <li><i class="fa-leaf" aria-hidden="true"></i><span>項目A</span></li>
  <li><i class="fa-lightbulb-o" aria-hidden="true"></i><span>項目B</span></li>
  <li><i class="fa-desktop" aria-hidden="true"></i><span>項目C</span></li>
</ul>

今回は、HTMLから直接アイコンフォントを記述しています。「<i class="fa-leaf"></i>」などの部分ですね。「aria-hidden」は読み上げスキップ指定です。

CSSの記述

CSSでは、アイコンフォントを指定してCSSを3行記述するだけ。

今回は特にclass名をつけていないので、「li i」と直接指定しています。

li i{
  display: inline-block;
  width: 20px;
  text-align: center;
}

ポイントは「display」で「inline-block」を指定すること。
こうする事で幅指定やセンタリングが有効になります。
アイコンフォントととても相性のいい設定なので、覚えておくと便利です。

あとは「width」指定で、アイコンの幅を指定します。
ここでは「20px」としていますが、表示の大きさなどによってお好みで微調整してみてください。

つぎに「text-align」を「center」として、アイコンを中央表示で揃えれば完成です。

ということで、超カンタンにアイコンの幅を揃えることができる小技でした。