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

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

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

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

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


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

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

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

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


 
フォントだから、色もサイズも自由自在
画像とは異なり、何種類でも配色・サイズを自由に作れる

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

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

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


 

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

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

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

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

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


 

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

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

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

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

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


 
使いたいアイコンだけを選択

使いたいアイコンだけを選択

今回は、この「IcoMoon」サイトで提供されているアイコンフォント生成機能の使い方をご紹介致します。

  1. 使いたいアイコンだけを含んだフォントファイルを生成し、
  2. そのフォントファイルを使ってウェブ上にアイコンを表示

させてみましょう。


 
まずは、使いたいアイコンを選択して、自サイト専用のフォントファイルを生成する方法からご紹介致します。