この存在は前から知っていたものの使用する事は今までなかった「FontAwesome」。

アイコンフォントをcssで簡単に設置できるというものですが、
ちょっと試してみようということでデモ作ってみたんですが、いいですね！

こんなに簡単に設置でき、アイコンの種類も豊富で、ライセンスもGPL。
なぜもっと早く使用しなかったんだと思ってます。

Font Awesome, the iconic font and CSS toolkit

DEMO

僕がいいと思った点は以下になります。

・アイコンの種類が豊富
・サイズも自由に変更(大きくしてもキレイ)
・回転させたり、色変更もできる
・独自の方法で設定もできる

FontAwesomeの使い方

まず上記にあるサイトからダウンロードしてきます。
ダウンロードしたファイルの中に、font-awesome.min.cssがありますのでそれを読み込みます。

このcssからフォントのファイルを読み込んでいるので,「fonts」フォルダを適切なディレクトリに設置してください。

普通のcssで設定する場合はもうこれでOKです！
あとはsassとかlessでも設定ができるそうです。

あとは下記のようにアイコンを付けたいタグに、
class名「fa」と、あとはアイコンの種類のclassを設定すれば大丈夫です。

サイトでは、iタグで説明がなされていますが、spanタグでも(の方が?)よいようです。

FontAwesomeを独自のルールで設定する方法

classを指定すれば簡単にできるのですが、中には空のタグを作りたくないという方もいらっしゃると思います。

その場合、独自にフォント指定するためのclassを設定し、cssの疑似要素(before)でアイコンを指定するという方法があります。
例えば下記のようになります。

icon:beforeの設定は例なので、各々の好きなようにしてもらうのですが、
contentの中身を自分自身で使うアイコン分設定する必要があります。

このcontentの書き方が特殊なので、下記URLを見ると簡単に設置できます。

Complete list of Font Awesome icons with their CSS content values

これで自分の好きな案配でアイコンの設定が出来るようになります。

アイコンはwebサイトの中で重要な要素なので、これは便利ですね！！