BootstrapにぴったりのWebアイコンフォント FontAwesome 4.0.0 が公開されていた件

しばらくニュースをチェックできずにいて何気なくFontAwesomeのサイトを覗いてみたら、FontAwesome4.0.0が公開されていました。ということで、4.0.0の特徴（変更点）と使い方のメモを残します。

f:id:kojikoji75:20131027194627j:plain

FontAwesomeは以下のような特徴をもつWebフォントです。

370個の豊富なアイコン
テキストであるため以下のようなメリットがある
- サイズを大きくして表示しても画質が落ちない（Retinaディスプレイでもハッキリ）
- CSSで色やサイズを自由に変えられる
- CSSでドロップシャドウなどの効果が簡単に付けられる

よく「エンジニアはデザインが苦手」と言われたりするようですが、最近ではCSSフレームワークやFontAwesomeのようなフォントセットが多く登場したため、デザイン面で苦労するという話は減少傾向にあるのではないでしょうか。

個人的には、アイコンリストを眺めているだけで「作成中のWebアプリのあの部分に使えるんじゃないかなー」などとイマジネーションが刺激され、生産欲を掻き立ててくれます。この「生産欲を掻き立てる」というのが、案外一番大きな導入メリットかもしれません。

f:id:kojikoji75:20131027195605j:plain

<i class="icon-○○○"></i> 前バージョンまでの書き方
<i class="fa fa-○○○"></i> 4.0の書き方

注意点としては、例えばVer3.3を使用していた人が、4.0に移行しようとして、html内の文字列「icon」を「fa fa」に全部テキスト置換するなどして使用できるというものでもないようです。

具体例を挙げると、Ver3.3で

icon-warning-sign
icon-download-alt

だったのが、ver4.0.0では

fa fa-warning
fa fa-download

といった具合に、プレフィックス以外の部分も微妙に変わっていたりするためです。

html中に上記のようなiタグが当たり前のように散見されるのが気持ち悪いという方もいるかもしれません。そのような場合は、以下のような方法で、回避することができます。

（１）使いたいアイコンをiconsなどを見て決め、名前を調べる。
（２）font-awesome.cssを開き、使用したいclass名（（１）で調べた名前）を検索する。
（３）該当のclassでbefore以降の部分のみ（例えば下記）をコピーする。

:before{
content:"\f07a";
}

（４）使用しているcssで、使用したいクラスへ貼りつける。
例えば、default.cssというcssの「sample」クラスの頭にWebフォントを挿入したい場合、以下のようになります。

.sample:before{
font-size:1.2em;
content:"\f07a";
}