アイコンって実は使いにくい
Webデザインの素材としてよく使うのがアイコン。ネット上を探せばフリーで使用できるものがたくさんあり、それらを落として一つずつ使っている方もいるのではないでしょうか。
私もPSDでダウンロードしたものを開いて必要なものだけを書き出したり、カラーリングをしてリサイズして・・・と１つのアイコンを使うのにも結構時間がかかったりしています。
アイコンフォントとは？
そんなときに便利なのがiconfont。クラス名を指定するだけで、フォントと同じように使え、リサイズしてもモザイクになることもありません。しかもカラーも指定することで変更することができるのです。
しかしながら、そんなアイコンフォントにも唯一の弱点が。それはほしいアイコンが入ってない場合があるということ。あれとあれはあるのにこれだけがない・・・ということが多く、統一感のためにも泣く泣くPSDのアイコンを使用するということも少なくありません。
オリジナルのアイコンフォントを作ろう
そんなときに便利なWebサービスを発見。なんと数あるアイコンフォントの中から自由に必要なものを選んで自分だけのアイコンフォントを作れるというものです。それがこちらのサービス。
fontello.com
このWebサービスでは以下のアイコンフォントの中から好きなものを好きな数だけ選んで使うことができます。
Fontelico
FontAwesome
Entypo
Typicons
Iconic
Modern Pictograms
Meteocons
MFG Labs
Maki
Zocial
Brandico
Elusive
Linecons
Web Symbols
これだけたくさんあれば必要なアイコンはほとんどここで揃うのではないでしょうか？この中から好きなものをクリックやドラッグで選んでダウンロードすることができます。
自分だけのIconFontの作り方
試しに作ってみましょう。アイコンはこのようにドラッグで選ぶこともできます。
選択できたら右上のDownloadボタンを押してダウンロードします。とくにアカウント登録などなしでダウンロードできました。
ダウンロードしたzipファイルを開いてみるとこのようなファイル構成になっています。
アニメーションはスピンに対応しているようです。クラス名にanimate-spinを入れると使えるようになるようです。icon名はdemo.htmlに全て表示されているので安心です。
このように必要なものを好きなだけ選んで使えるので大変便利ですね。よく使うものを選んで自分だけのアイコンセットを作ってみたいと思います。
