[2016年]WEBサイトのアイコンには画像じゃなくてアイコンフォントを使おう

WEBサイトのアイコンには画像じゃなくてアイコンフォントを使おう

もはや必須スキル?なアイコンフォントのお話です。やっぱ楽なのがいいですよね。例えば検索の虫眼鏡アイコンとかいちいち画像で書き出すのは大変です。だからこそアイコンフォントが使えると作業効率がだいぶ変わりますね。サポートしているブラウザも数年前とは比べものにならないくらい増えていますし使わない手はないです!!

Ads

アイコンフォントのブラウザ状況

どっちのベクターSHOW!! SVG vs Webフォント を比較する | EXP – クリエイティブな事をはじめた(い)全ての人達へ

http://wp-e.org/2014/06/04/2650/

http://wp-e.org/2014/06/04/2650/

こちらにもありますがChrome、firefox、SafariなどももちろんですがIEでもIE9以上で使えます。IE8以下のサポートは終了していますし、アイコンフォントは積極的に使っても問題なさそうですね。

以前の記事でも紹介していたのですが、ブラウザの状況も変わってきたので改めてご紹介します。

アイコンフォントのメリット

・大きさをfont-sizeで変えられる
・CSSで色を変えられる
・フォントなのでテキストのベースラインに合わせやすい

だいたいこんな感じでしょうか。

やっぱりフォントっていうところが大きなメリットですよね。
サイズも色もCSSで変更できるのは魅力です!!例えば、マウスオーバーで色変えたい時も

.icon:hover{
  color: #f00;
}

でできちゃうんです!

アイコンフォントのデメリット

・データ量が多くなる(重くなる)

単一の画像よりは一度に複数のアイコンデータを読み込むので、重くなってしまいますね。しょうがないのかなと思います。
とは言っても、一つのアイコンでサイズ違いや色違いのパターンをpngで作ってcssスプライトしたとしてもそれなりも重さになりますし、何より手間です。

オススメのアイコンフォント

Font Awesome, the iconic font and CSS toolkit

http://fontawesome.io/

http://fontawesome.io/

Genericons – a free, GPL, flexible icon font for blogs!

https://genericons.com/#close-alt

https://genericons.com/#close-alt

WebHostingHub Glyphs

http://www.webhostinghub.com/glyphs/

http://www.webhostinghub.com/glyphs/

Free vector icons – SVG, PSD, PNG, EPS & Icon Font – Thousands of free icons

http://www.flaticon.com/

http://www.flaticon.com/

The SVG Font Machine | Glyphter

https://glyphter.com/

https://glyphter.com/

Icon Font & SVG Icon Sets ❍ IcoMoon

https://icomoon.io/

https://icomoon.io/

Foundation Icon Fonts 3 | Playground from ZURB

http://zurb.com/playground/foundation-icon-fonts-3

http://zurb.com/playground/foundation-icon-fonts-3

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

http://fontastic.me/

http://fontastic.me/

いいなと思ったらシェアお願いします

同じタグで検索

Ads

同じカテゴリーの記事

ページの先頭へ