アイコンフォントの活用
フラットなデザインが流行している影響もあり、Web制作において随所でアイコンを利用する機会が増えています。
そのようなサイトでは同一のアイコンを、サイズやカラー違いで配置する事も少なくなく、アイコンを画像としてカラーやサイズバリエーションを準備する事に不便さを感じていましたので、アイコンフォントの導入を検討してみました。
アイコンフォントとは
本エントリーでのアイコンフォントとは、Webフォントのデータをテキストではなく、アイコンで作成されたものを指し、フォントとしてアイコンが表示出来るものを指します。
Webフォントとは、例えば通常ゴシック体はWindowsであればメイリオ、Macであればヒラギノなど、端末に所定のフォントがインストールされており、ブラウザの文字表示に利用されています。
通常は端末にインストールされていないフォントをCSSで指定しても有効になりませんが、WebフォントでWeb上のフォントデータを指定しておけば端末内に存在しないフォントでも表示・適用出来る技術です。
アイコンフォントのメリット
- アイコンのサイズ・カラーバリエーションが容易に増やせる
- アイコンを画像として用意する時とは異なり、フォントなのでCSSのfont-sizeでサイズを、colorでカラーを変更出来る。
- 背景色を気にしなくて良い
-
アイコンを画像として用意する時は、背景色が変わっても影響無いように透過pngにしたりしますが、
アイコンフォントはベクターデータなのでエッジの処理を気にする必要がありません。 - HTTPリクエスト数が減らせる
-
アイコンを画像として用意するとアイコンの数だけHTTPリクエストが発生します。
アイコンフォントであれば一つのフォントデータを読み込むだけなのでHTTPリクエスト数は減らす事が出来ます。
HTTPリクエスト数を減らすだけであればCSS Sprite等でも減らす事が出来ますが、CSS Spriteを採用するとbackground-positionのキーワード指定が使えなくなるなど弊害もあります。
アイコンフォントのデメリット
こうしてメリットを挙げると昔から存在するCSS Spriteよりも使い勝手が良いですが、勿論メリットばかりではなくデメリットもいくつか存在します。
デメリットとしては、アイコン画像よりもファイルサイズが重くなりがちな点やWebフォント未対応ブラウザーの存在でしょうか。
それでも厳密にパフォーマンスを計測したわけではありませんが、ページ内ないしサイト内で複数のアイコンを設置する場合は、
アイコンの数だけHTTPリクエストを発生させるよりは1つのフォントデータを読み込んだほうが早いかと思いますし、
色やサイズがCSSで調整出来るため、アイコンフォントのメリットは少なくないと考えています。
※パフォーマンスについて、厳密に計測した方で間違い等あればご指摘ください
アイコンフォントを利用する
現時点で多数のアイコンフォントが提供されていますが、Font AwesomeはCDNで提供されており利用も簡単です。
標準の利用方法ではクラス名でアイコンを指定する形式ですが、CSSベースなので必要に応じてカスタマイズも可能かと思います。
具体的な利用方法は下記ブログが非常にわかりやすく参考にさせていただきました。
Font Awesomeでアイコンを設置する例をいくつかご紹介します。
- ギアのアイコンを設定する
-
表示例：設定
<span class="fa fa-cog"></span>設定
- ギアのアイコンを大きくする
-
表示例：設定
<span class="fa fa-cog fa-2x"></span>設定
- アイコンを回転させる
-
表示例：読み込み中...
<span class="fa fa-spinner fa-spin"></span>読み込み中...
最後に
アイコンフォント利用時の注意点として、Webフォントに未対応の環境やスクリーン・リーダー環境下でのアクセシビリティの問題があると言われています。
アイコンそのものが重要な意味を成し、意味が伝わらなくなる時は実装方法を検討すべきでしょう。
単に装飾としてのアイコンであれば、対応している環境では表示し、未対応の環境では非表示にする等で差し支えなければ採用を検討されてはいかがでしょうか。