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

１．念のため、FontAwesomeとは

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

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

※FontAwesomeの導入編については「非デザイナーに必須の組み合わせ Bootstrap + Font Awesome を使ってみた」に書いていますのでご参考までに。

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

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

２．4.0.0での変更点

• 370個に増量
• コード部分での大幅な変更が加えられて、後方互換性なし
• クラス名のプレフィックスがicon-からfa-に変更

<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

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

３．iタグを使いたくない場合の使用方法

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";
}