アイコンにWebフォントを利用するメリット
アイコンを画像からWebフォントにすることでいくつかの利点が生まれます。
●HTTPリクエストを減らして、ページのパフォーマンスを向上できる。
●CSSでのカラーや大きさの変更が容易。
また、拡大縮小を行なってもアイコンがぼけないため、Retinaディスプレーでも利点を発揮します。ブラウザーごとに対応しているフォント形式が異なりますが、とはいえ、たいてい場合対応しますので、多くの場面で利用が期待できます。
—
アイコンフォントの使い方
アイコンフォントの使い方は、Webフォントの使い方とほとんど変わりません。@font-faceにWebフォントを読み込み、アイコン1つ1つにclass名を付けて運用する場合が多いです。
アイコンを表示するには「a」「b」などの英数字を記述する必要があります。しかしそのような無意味な文字をHTMLに記述してしまうと、音声ブラウザで閲覧する場合や検索エンジン対応など、様々な面から見ても混乱を招きやすい。
意味のある複数の文字を一つのアイコンとして表示するWebフォントもありますが数は少ないため、「:before」などの記事要素を利用する方法が一般的です。
アイコンフォントの見た目はアイコンだが、あくまでも「フォント」であり、従来の画像アイコンのように背景画像として配置することはできません。ただフォントであるため、font-sizeやcolorプロパティを使用して、アイコンの大きさやカラーリングの変更を容易に行えます。