アイコンフォントとは何ですか？

アイコンフォントとは

まず、「フォント」とは何かという点ですが、フォントは文字の概念（例：「アルファベットの大文字のエー」）と文字の見た目（例：「A」）の対応付けを記録したファイルの事です。このうち「アイコンフォント」とは、見た目としていわゆる文字ではなく絵柄が対応づけられているフォントの事を指します。

例えばアイコンフォントとしてよく知られている「Wingdings」（ Windows に標準添付）では「A」は「Vサインをしている右手」に対応づけられています。

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

アイコンフォントは１文字で絵柄を表示できますので、画像でアイコンを表示する場合よりデータ量を節約できます。また、拡大・縮小しても画像がぼやけたりせず、どのようなサイズでもきれいに表示できます。

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

使っているアイコン フォントがインストールされていない環境だと、アイコンフォントを指定 した部分でも元の文字が表示されてしまいますので、見る側の環境によってはコンテンツ制作者が意図した物と全く異なる表示になってしまう可能性がありま す。また、文字と絵柄の対応付けが分かっていないと入力ができないので、その点でも、慣れていないと使い勝手が悪いかもしれません。

Web フォントとしてのアイコンフォント

最近の Web 制作では、アイコンをパソコンの中でなくクラウド上に保存してどこからでも使えるようにした「Web フォント」（※1）というフォントの利用が進んでいます。この場合、見る側の環境に（殆ど ※2）依存せずに意図したフォントで表示できますので、特殊なアイコンフォントなど、見る側の環境にインストールされている事があまり期待できないフォン トでも比較的安心して使えるようになりました。

※1 「Webフォントとは？」詳しくはこちら。
※2 Webフォントの利用に対応していないブラウザもあります。

Web制作でのアイコンフォントの利用

Web アプリケーションなどでよく使う絵柄（「アップロード」マークや矢印など、下図例）をまとめて使えるようにしたアイコンフォントもあり、Web 制作で使われるようになってきています。

Web制作でのアイコンフォント利用のメリット

従来の画像の方法ですと、矢印一つにしても素敵に作るのはなかなか大変なものですし、フォントサイズに合わせたサイズをいくつか用意しなければなりませんでした。

アイコンフォントであれば色や表示サイズを自由に設定できますし、その他の大きなメリットとしては、一つの機能に対して一般的に分かりやすい絵柄が既に用意されている点です。個々の制作者が個性を発揮できないもどかしさはあるかもしれませんが、使いやすい Web アプリケーション作ろうとする場合は、ユーザが既に慣れていてくれるアイコンがあるという事は非常なメリットです。

以下は、これらのアイコンフォントを提供しているサイトの一例です。
- Font Awesome （無料）
- Glyphicons （有料）