アイコンデザインをWebフォントで表現出来る「アイコンフォント」の基本知識を解説

アイコンフォント配布サイト4選

アイコンは自分で制作したものをアップロードすることでアイコンフォントとして利用できます。
それだけでなく、無料でも豊富な素材をダウンロードできます。そのようなアイコンフォントの素材をダウンロードできるホームページをご紹介します。

1.Font Awesome

http://fontawesome.io/

電池やメールのマークのような基本的なアイコンだけでなく、FacebookやAmazonのようなブランドのアイコンなど675個ものアイコンを無料でダウンロードできます。

外部のサーバにフォントデータがすでにアップロードしてあるため、自社のサーバーにフォントデータを置いておく必要がありません。
そのため、サーバーへのリンクを設置するだけで利用を始められるので、手軽に始めたい人にとっても重宝するでしょう。

2.Genericons Neue

http://genericons.com/

WordPressの開発元が公開しているフォントで、WordPressの管理画面にも使われています。ショッピングカードや矢印のような基本的なアイコンが揃っています。

3.Ligature kudakurage Symbols

http://kudakurage.com/ligature_symbols/

日本人のウェブデザイナーが公開しているアイコンフォントです。
はてなブログのブックマークやmixiといった日本国内で普及しているサービスのアイコンも豊富です。

4.Typicons

http://typicons.com/

太めの線で描かれたデザインのアイコンフォントです。
ダウンロードやWi-FiのようなWebで利用する基本的なマークのほか、天候に関わるマークなども収録されています。

参考：
気軽に使えるアイコンフォントまとめ

まとめ

アイコンフォントは、画像ではなくテキストとしてホームページに埋め込めるものです。CSS3で記述することで色や大きさを変更することもでき、どのようなデバイスでも同様の解像度で表示が行えるのがメリットと言えるでしょう。

一方では、*InternetExplorer6、7などの古いブラウザでは表示がされない可能性もあります。*なんらかの原因でフォントデータがダウンロードできなかった場合、ページに文字列が表示されてしまうことになるので注意しましょう。

アイコンフォントは今回紹介したような素材サイトにて無料で配布されています。アイコンフォントを活用して、画像を多用することなく魅力的なデザインを組み立てられるようになっていきましょう。