Twitter Bootstrap 付属のアイコン画像より Font Awesome

Twitter Bootstrap が提供するアイコンは、 画像ファイルだから拡大すると見苦しいし、 色も黒と白の2色しかないので、 テーマをカスタマイズする場合の使い勝手がイマイチ。

そこで最近、Web フォント形式のアイコン『Font Awesome』を使い始めた。

Bootstrap ライクなデザインのアイコンフォントが、なんと 249 個。 Bootstrap が提供するアイコンと同じデザインのものも含まれているので、 全部フォントで置き換えられる。 というか、icon-* 系のクラスはフォントを使ったものに上書きされてしまうんだけど。

フォントなので拡大しても粗くならないし、CSS で色も変更できる。 Rails で使うなら、font-awesome-sass-rails を導入するのが手っ取り早い。

bootstra-sass と font-awesome-sass-rails の2つは、 今後も頻繁にお世話になりそうなので、 Rails の Application Template に追加しておこう。