読者です 読者をやめる 読者になる 読者になる

webhack / 猫とウェブ技術が好き

javascriptやcssやHTML5とかサーバーサイドの技術やプロジェクトマネジメントとかウェブに関するマーケティングとかWEBを取り巻く全般を好きに書くブログ

ウェブ/アプリに使える今風アイコンフォントの紹介。

メジャーに使われているアイコンフォントと、最近登場したアイコンフォントを中心に紹介していきます。アイコンフォントを使うとフォントファイルと1つのCSSファイルで多数のアイコンを導入できるので便利です。

1. GLYPHICONS

f:id:tkosuga:20150630235843p:plain

Bootstrapで使われているのでお馴染みな方も多いと思います。有料版もあってバリエーションが増えているのとPDF/AIデータの取得も可能です。Bootstrapでサイトを作っている延長でフォントも増やしたい場合には購入すると楽かも知れませんね。

 

glyphicons.com

2. ionicons

f:id:tkosuga:20150630235958p:plain

iOSアプリ/HTML5アプリと相性が良いアイコンフォントです。MITライセンスです。ページの一番したにCDNのURLが記載されていますので、すぐに試す事ができます。

ionicons.com

下の方を見るとLinuxのペンギンと、リストラに合ったBSDのデーモン君がいますね。

f:id:tkosuga:20150701000447p:plain

 

3. Font Awesome

f:id:tkosuga:20150701000707p:plain

アイコンフォントの代名詞ともいえるのがFont Awesomeです。ライセンスはSIL OFL 1.1です。このSIL OFLはここ数年で使われるようになってきたオープンソースのフォント用ライセンスです。

アイコン数の多さとcssでアイコンを入れ子で組み合わせる事ができるため、アイコン数以上にカバーできる範囲が広いフォントアイコンです。

fontawesome.io

4. material icons (Google)

Googleのマテリアルデザインについてのガイドラインに含まれているフォントアイコンです。ライセンスは(CC-BY 4.0)です。セルフホスティング以外にGoogle Web Fontsを経由して利用する事もできます。

f:id:tkosuga:20150701001313p:plain

 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ライセンスです。

f:id:tkosuga:20150701002733p:plain

CSS3でモーフィングさせてフォントを切り替えています。利用所は限られそうですが印象に残ります。

Marka - Beautiful transformable icons

6. Weather Icons

f:id:tkosuga:20150701003400p:plain

天気予報サイト/アプリにぴったりなアイコンフォントです。ライセンスはSIL OFL 1.1です。天気という特定用途に特化しているのとFont Awesomeと同じ使い方になるため分かりやすくて親切です。

Weather Icons - 189 Icon Font inspired by Font Awesome and designed for Bootstrap

最後・まとめ

最近はアイコンフォントが一般的になって、Font-AwesomeやBootstrapのGlyphiconsのようなアイコンフォントがだいぶ使われるようになりました。

例えばSpinner(くるくる回るスピナー)などは画像を使わずにアイコンフォントを使う方が楽に感じます。管理画面などバックエンドでも細かいアイコンファイルを準備しなくても良いので開発が楽になります。