ウェブ/アプリに使える今風アイコンフォントの紹介。
メジャーに使われているアイコンフォントと、最近登場したアイコンフォントを中心に紹介していきます。アイコンフォントを使うとフォントファイルと1つのCSSファイルで多数のアイコンを導入できるので便利です。
1. GLYPHICONS
Bootstrapで使われているのでお馴染みな方も多いと思います。有料版もあってバリエーションが増えているのとPDF/AIデータの取得も可能です。Bootstrapでサイトを作っている延長でフォントも増やしたい場合には購入すると楽かも知れませんね。
2. ionicons
iOSアプリ/HTML5アプリと相性が良いアイコンフォントです。MITライセンスです。ページの一番したにCDNのURLが記載されていますので、すぐに試す事ができます。
下の方を見るとLinuxのペンギンと、リストラに合ったBSDのデーモン君がいますね。
3. Font Awesome
アイコンフォントの代名詞ともいえるのがFont Awesomeです。ライセンスはSIL OFL 1.1です。このSIL OFLはここ数年で使われるようになってきたオープンソースのフォント用ライセンスです。
アイコン数の多さとcssでアイコンを入れ子で組み合わせる事ができるため、アイコン数以上にカバーできる範囲が広いフォントアイコンです。
4. material icons (Google)
Googleのマテリアルデザインについてのガイドラインに含まれているフォントアイコンです。ライセンスは(CC-BY 4.0)です。セルフホスティング以外にGoogle Web Fontsを経由して利用する事もできます。
Material icons - Google Design
ウェブサイトやiOS/Androidのアプリ開発にて利用する用途で作られています。アイコンそのものの価値もありますが、最大の見どころはアイコンについての丁寧な説明です。とても勉強になります。
Icons - Style - Google design guidelines
https://www.google.com/design/spec/style/icons.html#icons-product-icons
https://www.google.com/design/spec/style/icons.html#icons-system-icons
5. Marka
ここで一風変わったウェブフォント"Marka"の紹介です。アイコンがトランスフォームして次のアイコンに滑らかに変化します。MITライセンスです。
CSS3でモーフィングさせてフォントを切り替えています。利用所は限られそうですが印象に残ります。
Marka - Beautiful transformable icons
6. Weather Icons
天気予報サイト/アプリにぴったりなアイコンフォントです。ライセンスはSIL OFL 1.1です。天気という特定用途に特化しているのとFont Awesomeと同じ使い方になるため分かりやすくて親切です。
Weather Icons - 189 Icon Font inspired by Font Awesome and designed for Bootstrap
最後・まとめ
最近はアイコンフォントが一般的になって、Font-AwesomeやBootstrapのGlyphiconsのようなアイコンフォントがだいぶ使われるようになりました。
例えばSpinner（くるくる回るスピナー）などは画像を使わずにアイコンフォントを使う方が楽に感じます。管理画面などバックエンドでも細かいアイコンファイルを準備しなくても良いので開発が楽になります。
