200を越えるアイコンが揃ったBootstrap向けWeb Font「Font Awesome」
Font AwesomeはBootstrapと組み合わせて使えるアイコンを集めたWeb Fontです。
Twitter Bootstrapの便利な機能の一つにアイコンパックがあります。ちょっとした装飾を手軽に付け加えられるのは便利です。そんなBootstrapに200以上のアイコンを追加するのがFont Awesomeです。Web Fontで作られたアイコンパックです。
全てのアイコンです。
ソーシャルアイコンも揃っています。
例です。ドロップダウンやボタンにつけています。
大きさが自由に変更できるのもフォントならではです。
ドロップダウンにつけると機能がより分かりやすくなります。
カスタマイズすればレーティングに使ったりもできます。
ファイル構成です。SVGやフォントが提供されます。
Font AwesomeはTwitter Bootstrapで提供されているものに加えて色々な場面で役立ちそうなアイコンがまとめて提供されます。使い方はTwitter Bootstrapと変わりません。アイコンの色を簡単に変更できるのも便利です。対応ブラウザはIE7からとなっています。
Font AwesomeはCreative Commonsのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
Web Fontは限定されたWebブラウザにしか使えないイメージがありましたが、IE7から対応しているのであれば十分と言えるのではないでしょうか。TrueTypeフォントもサイズは68KB程度で使えないレベルではなさそうです。それでいて色を自由に選べて、200以上のアイコンであれば使わない手はないかも知れません。
デザインをほんの少し工夫するだけでユーザビリティは大きく向上します。アイコンはその一つです。全てを一から自分で用意すると個別のファイルになってしまって、最初こそ結合するものの徐々に必要なアイコンが増えると破綻してしまいます。それであれば元々多数のアイコンが用意されているFont Awesomeを使うべきでしょう。
Font Awesome, the iconic font designed for use with Twitter Bootstrap