話題のアイコンフォントって何？知らないと損する４つの真実

アイコンフォントとは？

Webフォント（CSSでフォントデータをweb上から取得し、利用できるようにする）を利用して、アイコンを表示させたもの。

利用方法

きっと①、②はやらず、web上で公開されているアイコンフォントを利用する人がほとんど。
①SVGでアイコンを作成
②アイコンデータに変換
③実装

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

・画像よりも動作が軽い
・スプライト画像のように、1つのファイルをロードするだけなので、リクエスト数を減らせる
・更にスプライトのように面倒な管理が不要
・ベクターファイルのため、拡大しても綺麗（retinaも問題なし）
・フォントなので色やサイズの変更が簡単
・アイコンを作る手間が省ける
・スマホなら主要OS、ブラウザでサポートされているので使いやすい

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

・古いブラウザで使えない場合がある
・1アイコン内に複数の色の指定ができない
・特定のアルファベッドとアイコンフォントを紐付けるため、HTML上には不明なアルファベットが置かれる。
　そのため、検索エンジンから見たら不要なものが入っていると認識される。
・フォントデータがダウンロードできなかった場合、返還前の不要なものが表示される

アイコンフォントはどんな時に利用すべき？

アイコンフォントは制作コストが高いです。
もし、Web上のものを使える環境にいるのであれば、上記デメリットを考えつつ、利用するのも良いかと。
しかし、自分で作成する必要がある場合、実際にアイコンを使って表示した方がコストがかからない可能性もあります。
担当サービス内で、アイコンをふんだんに使いたいのであれば、使ってみる。
そうでなければ、いつも通りアイコンを使ってみる。
なんて考えでも良いかもしれません。

しかし、最近ではretina対応で2倍、いや今後は3倍など解像度がどんどん増えていく可能性もあるため、このようなものも考えてみてもいいかもしれません。