使うアイコンだけを含む最小限のウェブフォントを作る [ホームページ作成] All About

ウェブページ上に表示するアイコンは、画像よりもウェブフォントが便利

ウェブフォントなら、拡大・縮小が綺麗で、表示色・背景色も自由自在

ウェブ上に、アイコンのような小さな絵を表示したい場合、画像で用意するよりも、「ウェブフォント」を利用する方が便利です。色や大きさが固定されている画像とは異なり、フォントなら(通常の文字と同様に)色や大きさを自由に変更可能ですから。また、画像よりもフォントの方が、全体のサイズは小さくて済みます。

アイコンをウェブフォントで表示する方法は、記事「アイコンをWebフォントで表示できる「Font Awesome」」でもご紹介しています。

■ウェブフォントとは

ウェブフォントは、HTMLと共にフォントファイルもダウンロードして使用

「ウェブフォント」とは、ウェブページの表示時に、フォントファイルも一緒にダウンロードして使う仕組みです。必要に応じてフォント自体がダウンロードされるため、望みのフォントで表示できます。文字の代わりに絵を収録した「アイコン表示用フォント」も多数公開されています。

ウェブフォントの基本的な使い方に関しては、記事「望みのフォントで表示できる！ウェブフォントの使い方」でも解説しています。

■フォントだから、色もサイズも自由自在

画像とは異なり、何種類でも配色・サイズを自由に作れる

例えば、右図のように「ピン」のアイコンを、大きさや色が異なる6種類で表示したい場合を考えます。もし、これらを「画像」で作れば、6個の画像ファイルが必要です。数が増えれば、それだけ合計のファイルサイズも増えます。

しかし、「ウェブフォント」なら、フォントファイルを1つ用意するだけで済みます。アイコンの色や大きさは、通常の文字と同じように、CSSを使えば自由に指定できます。1つのフォントで、6種類でも60種類でも、好きなだけ配色やサイズの異なるバリエーションが作れるのです。

数個のアイコンのために、数百種類ものアイコンを含んだフォントをダウンロードさせる？

アイコン用フォントの中には、使わないアイコンも多数ある

300個程度のアイコンを含んでいるフォントでも、ファイルサイズはわずか60～70KB程度です。画像をたくさん用意する場合と比べれば、遙かにダウンロード量は少なくて済みます。

しかし、いくらウェブフォントの方がサイズが小さくて済むとはいえ、たった数個のアイコンを使うためだけに、数百種類ものアイコンデータを含んだフォントをダウンロードさせるのは、無駄が多いようにも感じられるでしょう。

使用するアイコンに限定した、最小限のフォントファイルを作る

使いたいアイコンだけをフォントファイルに含めてくれる「IcoMoon」

そこで便利なのが、「IcoMoon」というサービスです。このサイトでは、4,600種類を超えるアイコンの中から、自分が使いたいアイコンだけを収録した、専用のフォントファイルを生成してくれます。

これなら、本当に必要なアイコン(フォント)データだけをダウンロードさせられるので、無駄がなくなります。