#LOVEFONT Advent Calendar 2013 14日目です。

フォントについて語るAdvent Calendarなんだけど斜め上でFont Awesomeについて書こうと思います。

Font AwesomeというのはWebサイトで使える様々なアイコンをフォントファイルとして提供しているライブラリです。

Font Awesome

これの何がいいかというと、まず色々なアイコンが簡単に使えるというのはもちろんのこと、それがフォントファイルで提供されているというところです。フォントファイルで提供されているということはつまり、CSSで見た目を制御できるわけです。

例えば、大きさを変えようと思ったらfont-sizeプロパティで変えられるし、色を変えようと思ったらcolorプロパティで変えられるわけ。つまりアイコンをちょっと変更するだけで画像切り出し直すみたいな手間から開放されるわけで、マジAwewomeなわけです。

使い方は簡単で、CSSとフォントファイルを読み込んだらi要素に決まったclassを指定するだけ。

<i class="fa fa-check"></i>

これだけ。（前はclass="icon-check"とかだったけどバージョン4からfaに変わった）

あと、色とか大きさ変えるだけじゃなくて、CSSのアニメーションなんかも当然効くのでローディングのアニメーションなんかも簡単にできます。

例えばこんな感じ。

また、フォントファイルをローカルにインストールすればPhotoShopなんかでも使えるのでデザイナさんも楽にデザインできるみたいです（たぶん）。

以上、#LOVEFONT Advent Calendarとしては斜め上なエントリでした。