WebフォントのFont AwesomeをCSSでアイコンとして利用する

ウェブ

font-awesome-css

アイコンを作成するのって、意外にめんどくさいですよね。
最近僕は、ほとんど画像を作ることなくサイトを制作しています。

ずいぶん横着な人間になってしまいましたが、テクノロジーを支える方々に感謝の念を抱きつつ、引き続き横着でおりたいと思います。

 

そんな怠惰な人間が好むWebフォントとして、代表格となるサービスはFont Awesome ですね。

見出しやリストのアクセントとしてアイコンを表示させたい時に、非常に重宝させて戴いております。

ただ、html で使用する分には<i>〜</i> をコピペするだけで簡単に済みますが、CSS として使う時に『はて?』と思いましたので、記事として残しておきたいと思います。

 

Font Awesome をCSS に適用させる

画像をアイコンとして表示させる場合に使用するCSS プロパティは、background が一般的ですが、Font Awesome を使用する場合は、content と、font-family を指定する必要があります。

 

サンプル

実際には、:before/:after などのCSS 擬似要素を用いて利用することが多いかなと思います。

 

‘content’ の見つけ方

アイコンの個別ページに行き、Unicode として記載されているコードを使用します。

font-awesome

 

注意点

Font Awesome は、新しいアイコンが随時更新されています。

ファイル一式をローカルに保存して、これを使い回している場合は、css/font-awesome.css 内に新しいアイコンが登録されていません。

うまく表示されない場合は、新たにFont Awesome のファイルをダウンロードし直して、それを使用します。

 

【サンプル】リンク『target=”_blank”』にのみ、アイコンを表示させる

とりあえず、個人的に外部へ飛ばすリンクにアイコンを表示させたかったので、それを例として残しておきます。

 

niki weblog のトップページ (サイト内部へのリンク)
Font Awesome (サイト外部へのリンク)

これで、ブログ内の内部リンクにはアイコンが表示されず、外部リンクにのみ、アイコンが表示されるようになりました。

 

Font Awesome のアイコンの幅を均一に揃える

Font Awesome のアイコンは、通常の文字と異なりますので、リスト形式などで縦に並べる場合は、続く文字の先頭がずれてしまいます

そういった場合は、下記のように一手間加えることで、つら合わせができるようになります。

 

HTML で使用する場合

HTML で使用する場合は、クラス名を付与するだけで幅を均一に揃えることができます。

加えるクラスは、「class=”fa-fw”」です。

 

CSS で利用する場合

CSS でアイコンの幅を均一にする場合は、下記の要領で要素を加えて成形します。

簡単に要約すると、アイコンに対して、display を inline-block にして、領域の幅を決め、中央寄せにして、続く文字との間にマージンを取る、といった感じです。

完成形は、このブログのサイドバーのカテゴリー部分となります。(PC 閲覧時のみ)

ex

 

以上が、Font Awesome をCSS で利用する方法でした。

まぁ、あんまりたくさんのアイコンを使い過ぎると、見た目が少しクドくなりますが、手軽に利用できるこのようなサービスには、本当に感謝です。

こんな記事もよければどうぞ!

プロフィール

niki

age
30+
gender
male

なんやかややっています。
趣味・日常・仕事のことなどを書いています。

© COPYRIGHT 2016 niki weblog