【覚書】レスポンシブ・フラットデザインにぴったり!Webフォントアイコンを使ってますか?

sample

こんにちは。あゆこです。
シルバーウィークが待ち遠しいです!

今回は自分のためにも、Webフォントアイコンについてまとめておきます。

1.Webフォントアイコンとはなんぞや

言わずもがな、Webフォントにテキストではなく、アイコンを表示させたものです。
Webフォントがわからないっというときはググッてみてね。

■メリット

・拡大縮小が容易。なので高解像度のデバイスでも綺麗に表示される。
・CSSでサイズ・色・影・アニメーション等の管理が簡単。効率が良い。

■デメリット

・古いブラウザで使えない場合がある。
・基本セット使用なので、1つだけアイコンを使うよりは容量が重くなる

2.Webフォントアイコンセット

セットで使えるのでデザインが統一できたり、内容に合ったアイコンが配置できてとっても助かります。
※念のため、使用の際はダウンロード元のライセンスを必ず確認してくださいね!

Font Awesome

Font Awesome  the iconic font and CSS toolkit
※個人・商用利用可

Entypo

Entypo
※クリエイティブコモンズ

WebHostingHub Glyphs

WebHostingHub Glyphs
※個人・商用利用可

Batch.

Batch • 300  Icons for Web   User Interface Design
※個人・商用利用可

Ligature Symbols

Ligature Symbols
※個人・商用利用可

typicons

Typicons
※個人・商用利用可 

3.ジェネレーター

自作のアイコンをアイコンフォントにしたり、
必要なアイコンだけを選択してセットを作成できる!

Fontello

Fontello   icon fonts generator

IcoMoon

IcoMoon App   Icon Font  SVG  PDF   PNG Generator

ICONVAULT

Iconvau.lt

Fontastic

Create your Icon Font in seconds   9000 Vector Icons Available   Free Icon Font Generator

おわりに

スマートでおしゃれなWebデザインを目指したいものですね。

 

参考にさせていただいたサイト様(ありがとうございました!)

http://ozpa-h4.com/2014/08/28/icon-web-font/
http://www.qript.co.jp/blog/technique/298/