アイコンをWebサイトに使用する機会は多いと思います。そんなアイコンを便利にスマートに使えるのがアイコンフォントです。
アイコンフォントは、画像ではなくテキストとしてアイコンを表示させるものです。
サイトの見栄えをより良くしたり、制作の手間を省くこともできるため、最近では多くのサイトで利用されていると思います。
ここではアイコンフォントのメリットやデメリット、基本的な使い方のメモをしています。
アイコンフォントを使用するメリット・デメリット
アイコンフォントを使用するかどうかを決めるためにもメリット・デメリットはおさえておきたいところ。サイトの作り方やUXなどを考えて決めていきましょう。
表示速度に関連するデータ量や読み込み
画像よりもテキストの方がデータ量としては軽くなります。
アイコンフォントはテキストデータなので画像よりもデータ量が抑えられ、表示速度UPに貢献します。またさまざまなアイコンが1ファイルにまとめられていることで、リクエストを1回で済むこともメリットです。
アイコンを表示するためにpngやjpgなどの画像を多用すると、画像のデータ量が多くなって表示が遅くなってしまう可能性があります。
しかし単にフォントの方が軽いからという理由でアイコンフォントを使用するのはストップ。どんなアイコンをどの程度使用するのかによって、良し悪しはあります。サイトデザインに合わせて考えていきたいところです。
サービスによっては、実際に使用するアイコンが少なくても多数のアイコンデータを含んだファイルをダウンロードしなければならないものがあります。
そこまでアイコン画像を使用しないのであれば、フォントデータを読み込むより、画像の方が軽く済ませらることもあります。
デバイスやサイズによる解像度の変化
アイコンフォントはベクター形式で作られています。これのメリットは表示サイズやOS・デバイスによって見え方が変わらないことです。
画像は解像度によって見え方が変わってしまうことがあります。画像を拡大するとボケてしまったりすることがありますが、フォントであれば見え方が統一されます。
だた画像でもSVGならベクター形式なので、どの画像形式を使用するかによっては、あえてアイコンフォントを使わずともこの問題は解決できると思います。
CSSでデザインの変更が簡単にできる
テキストがサイズや色などが簡単にCSSで指定できるのと同様にアイコンフォントもCSSでスタイルを指定できます。
画像だと作成した画像データの色やサイズを変更して、書き出して画像をアップして…と手間になりますが、アイコンフォントならコードをほんの少し変更するだけでOK。
アニメーション表現も画像より柔軟に対応できます。
ここが一番SVG画像と異なる、アイコンフォントのメリットになるかと思います。
【アイコンフォントを使用するかSVG画像を使用するか迷った時の参考】
アイコンフォントか? SVG アイコンか? | Accessible & Usable
アイコンフォントの使い方
アイコンフォントはWEBフォントのようにCSSを使って導入することができます。
HTML や CSS の記述方法はアイコンフォントによって異なるところもあるので、使用するアイコンフォントサービスの使用方法を確認してください。
アイコンフォントデータをダウンロード or CDNで読み込み
サイト上で選択したアイコンのみをダウンロードできるサイトもあれば、提供しているアイコンフォントを全てを一度ダウンロードしなければならないサイトもあります。
配布サイトにサンプルのHTML、CSSがサイトに記載されていたり、ダウンロードデータに含まれていればそちらをチェックします。参考にして設定しましょう。
CDNでの提供があるか、選択したアイコンのみを使用することが可能かといったことも、どのアイコンフォントサービスを使用するかの決め手にしても良いと思います。
ダウンロードファイルをフォルダに移動
ダウンロードして使用するなら、ダウンロード後フォントファイル・CSSファイルをサイトのディレクトリに移動させます。
さまざまなブラウザに対応できるようにフォーマットの異なるフォントファイルがあります。対象とするブラウザが決まっているなら、追加するデータを選別しましょう。
font専用のフォルダを作ってそこに格納しても良いですし、CSSと同じところにおいてもOK。管理しやすいように配置してください。
CSSを修正
データを配置したら、ダウンロードしたCSSを確認します。
読み込みを指定する @font-face
の src: url("データまでのpath")
が合っているか確認してください。ここが間違っているとフォントデータが読み取れず、アイコンが表示されません。
もしCSSファイルがない場合、以下のように @font-face
を使用して自分のCSSファイルに記述すればOK。
@font-face {
font-family: 'font_name';
src: url('../font/font_name.eot');
src: url('../font/font_name.eot?#iefix') format('embedded-opentype'),
url('../font/font_name.woff') format('woff'),
url('../font/font_name.ttf') format('truetype'),
url('../font/font_name.svg#webfont') format('svg');
}
.icon01:before {
font-family: 'font_name';
content: 'icon_symbol';
color: #00acee;
}
クラスや特殊文字など表示方法を確認
どのアイコンを使用するかを指定するときに、一般的に2つの実装方法があります。
1つは Unicode でアイコンを指定する方法です。多くのアイコンフォントには独自のUnicodeが設定されています。それを指定することでアイコンフォントを表示させることができます。
.icon_font:before {
content: "\f015";
}
Unicodeとは|「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典
2つ目は Ligature(合字)と言って、Open Type フォントの文字の組み合わせでイメージを作る機能を利用したものです。上記のようなコード番号ではなく、例えば「icon-home」というテキストを記述したらそこにアイコンが表示されます。
<span class="icon_font">icon-home</span>
配布サービスによっては、クラスの指定によってアイコンや大きさを変更したりアニメーションを追加することも可能です。Font Awesome を例にすると、アイコン専用のクラス名と fa-2x のような大きさを指定するクラス名を追加することでアイコンが表示されます。
どのようにコードを実装することでアイコンフォントが表示されるのかもチェックしてみてください。
アイコンフォントにはarea-labelをつける
視覚的に認知できないユーザーへの配慮のために、画像の場合alt属性を追加しますが、アイコンフォントを使用する際にはaera-label属性を追加します。
aria-label="アイコンの説明"
【aera-label属性の使い方参考】
カテゴリー : HTML-CSS