font awesome アイコンを文字の縦中央に合わせてみた

ホームページ制作でアイコンの役割はとても重要です。
直感的に意味を伝えてくれるからです。

そんなわけで、アイコンフォントであるをよく使用します。
CSSだけでアイコンを反映できるのでとても使いやすいです。

先日このFont Awesomeのサイズを調整したところ、縦位置がずれることがありました。
見栄え的に良くなかったので、いろいろ調べてちょうどよい位置に調整しました。
忘備録として記録いたします。

現象はこのような感じです。

HTMLソース

もともとは以下のように記述していました。

アイコンが大きいので、次のように小さく調整したところ、アイコンが下ぞろえになってしまいました。

下ぞろえになったアイコンをに揃えるにはどうすればよいか調べました。

vertical-alignで調整する方法

スタイルシートの縦位置を指定する「vertical-align」を使用する方法です。
このやり方をすると、次のように調整できました。

やや下位置ですが、程よい位置に調整できます。

ソースはこちら

ポイントは次の3つです。

  1. line-heightをフォントサイズと同じにする
  2. 高さをフォントサイズと同じにする
  3. vertical-alignをmiddle(中央)に設定する

これだけのことで調整できました。

さらに次のやり方でもできます。

vertical-alignをmiddleで調整するやり方でもよいのですが、やや下位置になっているのが気になります。これをもう少し調整する方法があります。
それがこちらです。

ソースはこちら

ポイントは次の通りです。

  • absolute指定で強制的に縦中央に揃える

図形等を強制的に縦中央に揃える方法として、absoluteを使用するやり方があります。
高さを指定して、top 0 bottom 0 を指定します。

このやり方をすると、vertical-align式よりも中央位置になります。

疑問:どちらのやり方がおすすめ?

手軽な「vertical-align」方式と見栄えがより良い「absolute」方式のどちらが良いかというとケースバイケースです。

レスポンシブでスマートフォンでの表示も気にするならば、「vertical-align」方式のほうが無難です。
スマホでの思わぬずれが起きにくいためです。
どうしても見た目を重視するならば、「absolute」方式一択です。

結局のところ、お好みでOKです。
本記事がまたお役に立てば幸いです。

今回のレポートは以上です。
読んでいただいてありがとうございました。


ホームページに関するお悩み事やご相談事がございましたら私どもまでご連絡ください。 鋭意ご対応申し上げます。
ホームページのご提案もさせていただいております