WEB制作に使える!Webフォントアイコンセットまとめ

WEB制作に使える!Webフォントアイコンセットまとめ

最近は仕事でもよく使っています。アイコンフォント。というわけで今回はアイコンフォントをセットで提供してくれているサイトのまとめです。ぜひ作っているサイトにあったアイコンを探してみてくださいね。

Ads

アイコンフォントっていいですよね

何と言っても楽ですよね〜。pngなどの画像だと色を変えたり、大きさ変えたりするのが大変ですよね。アイコンフォントなら文字と同じ扱いです。なので

  • 大きさの変更がCSSだけでOK
  • 色の変更もCSS

ただ、デメリットとしては・・・

  • Fontデータも読み込まなければいけない
  • CSSの記述がめっちゃ増える

例えば、Facebookの画像を一枚読み込むよりもデータ量が多いので、読み込みに時間がかかる可能性があります。ただ、この辺はちょっとしょうがないのかなって思ってます。それよりもメリットの恩恵のほうが上かなと思いますね。

Tonicons | A Free Font of 200 Outline Icons

https://www.tonicons.com/outline-icon-free-font/

https://www.tonicons.com/outline-icon-free-font/

Simple Line Icons Webfont | GraphicBurger

http://graphicburger.com/simple-line-icons-webfont/

http://graphicburger.com/simple-line-icons-webfont/

Themify Icons – 320+ Free Icons For Web Design & Apps

http://themify.me/themify-icons

http://themify.me/themify-icons

Linea Free Iconset

http://www.linea.io/

http://www.linea.io/

Feather: 130 Free Icons by Cole Bemis

http://colebemis.com/feather/

http://colebemis.com/feather/

Freebie: Helium Icon Set (AI, EPS, SVG, Icon Font) | Codrops

http://tympanus.net/codrops/2014/10/10/freebie-helium-icon-set/

http://tympanus.net/codrops/2014/10/10/freebie-helium-icon-set/

Font Awesome, the iconic font and CSS toolkit

http://fortawesome.github.io/Font-Awesome/

http://fortawesome.github.io/Font-Awesome/

Entypo

http://www.entypo.com/

http://www.entypo.com/

WebHostingHub Glyphs

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

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

Foundation Icon Fonts 3 | Playground from ZURB

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

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

Batch • 300+ Icons for Web & User Interface Design

http://adamwhitcroft.com/batch/

http://adamwhitcroft.com/batch/

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

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

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

Ligature Symbols

http://kudakurage.com/ligature_symbols/

http://kudakurage.com/ligature_symbols/

Typicons

http://typicons.com/

http://typicons.com/

おわりに

探してみると結構あるんですね〜。アイコンフォントセットって。作っているサイトに合わせて使い分けができそうですね。ただ、使う際にはラインセンスをちゃんと確認してからにしてくださいね〜

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

同じタグで検索

Ads

同じカテゴリーの記事

ページの先頭へ