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

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

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

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

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

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

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

▼ 実際のHTML例

 

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

FontAwesomeで作ったアイコン幅が統一されてない見栄えの悪いリスト

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

 

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

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

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

リストの見栄えが悪いのはFotnAwesomeアイコンが等幅でなかったからだった

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

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

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

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

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

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

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

 

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

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

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

FontAwesomeでアイコンを等幅にして見栄えが良くなったリスト例

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

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

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

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

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

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

 

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

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

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

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

  • クラス名が fa-  で始まる、含む、終わる
  • クラス名が icon-  で始める、含む、終わる

CSSでも正規表現もどきが使えるので、それを応用してます。

▼ CSSでセレクターに正規表現(もどき)を使う

 

実際にこのCSSを適用されたリストがコチラ

独自CSSを適用してアイコンを等幅にしたリスト例。ガタガタしなくなって見栄えが少し良くなった

まあさっきと同じですが・・・

FontAwesome3.0以降なら fa-fw  が使えるけど、それ未満だったり、あるいは IcoMoon とかのWebフォントサービスを導入しているならコチラの方法が確実&安全だと思いますね。

ここまでのまとめ

ということで FontAwesome アイコンを等幅にする方法でした。

リストとか縦並びにアイコン表示するときは役立つはずです。ではまたバイバイ(^^)/~~~

CSS

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください