これはやばい!数百もの中から自分だけのオリジナルicon fontをつくれちゃうサービス

Pocket

アイコンフォントの作り方

アイコンって実は使いにくい

Webデザインの素材としてよく使うのがアイコン。ネット上を探せばフリーで使用できるものがたくさんあり、それらを落として一つずつ使っている方もいるのではないでしょうか。

私もPSDでダウンロードしたものを開いて必要なものだけを書き出したり、カラーリングをしてリサイズして・・・と1つのアイコンを使うのにも結構時間がかかったりしています。

アイコンフォントとは?

そんなときに便利なのがiconfont。クラス名を指定するだけで、フォントと同じように使え、リサイズしてもモザイクになることもありません。しかもカラーも指定することで変更することができるのです。

しかしながら、そんなアイコンフォントにも唯一の弱点が。それはほしいアイコンが入ってない場合があるということ。あれとあれはあるのにこれだけがない・・・ということが多く、統一感のためにも泣く泣くPSDのアイコンを使用するということも少なくありません。

オリジナルのアイコンフォントを作ろう

そんなときに便利なWebサービスを発見。なんと数あるアイコンフォントの中から自由に必要なものを選んで自分だけのアイコンフォントを作れるというものです。それがこちらのサービス。

fontello.com
オリジナルアイコンフォントを作ろう
このWebサービスでは以下のアイコンフォントの中から好きなものを好きな数だけ選んで使うことができます。

Fontelico
自分だけのオリジナルicon fontをつくれちゃうサービス-01
FontAwesome
自分だけのオリジナルicon fontをつくれちゃうサービス-02
Entypo
自分だけのオリジナルicon fontをつくれちゃうサービス-03
Typicons
自分だけのオリジナルicon fontをつくれちゃうサービス-04
Iconic
自分だけのオリジナルicon fontをつくれちゃうサービス-05
Modern Pictograms
自分だけのオリジナルicon fontをつくれちゃうサービス-06
Meteocons
自分だけのオリジナルicon fontをつくれちゃうサービス-07
MFG Labs
自分だけのオリジナルicon fontをつくれちゃうサービス-08
Maki
自分だけのオリジナルicon fontをつくれちゃうサービス-09
Zocial
自分だけのオリジナルicon fontをつくれちゃうサービス-10
Brandico
自分だけのオリジナルicon fontをつくれちゃうサービス-11
Elusive
自分だけのオリジナルicon fontをつくれちゃうサービス-12
Linecons
自分だけのオリジナルicon fontをつくれちゃうサービス-14
Web Symbols
自分だけのオリジナルicon fontをつくれちゃうサービス-15
これだけたくさんあれば必要なアイコンはほとんどここで揃うのではないでしょうか?この中から好きなものをクリックやドラッグで選んでダウンロードすることができます。

自分だけのIconFontの作り方

試しに作ってみましょう。アイコンはこのようにドラッグで選ぶこともできます。
アイコンフォントを作ってみる
選択できたら右上のDownloadボタンを押してダウンロードします。とくにアカウント登録などなしでダウンロードできました。

ダウンロードしたzipファイルを開いてみるとこのようなファイル構成になっています。
アイコンフォントを作ってみよう
アニメーションはスピンに対応しているようです。クラス名にanimate-spinを入れると使えるようになるようです。icon名はdemo.htmlに全て表示されているので安心です。
icon-fonts19
このように必要なものを好きなだけ選んで使えるので大変便利ですね。よく使うものを選んで自分だけのアイコンセットを作ってみたいと思います。