ウェブページ上に表示するアイコンは、画像よりもウェブフォントが便利
![ウェブフォントなら、拡大・縮小が綺麗で、表示色・背景色も自由自在](https://imgcp.aacdn.jp/img-a/800/auto/aa/gm/article/4/3/5/8/9/3/textmerits.png)
ウェブフォントなら、拡大・縮小が綺麗で、表示色・背景色も自由自在
アイコンをウェブフォントで表示する方法は、記事「アイコンをWebフォントで表示できる「Font Awesome」」でもご紹介しています。
![ウェブフォントは、HTMLと共にフォントファイルもダウンロードして使用](https://imgcp.aacdn.jp/img-a/800/auto/aa/gm/article/4/3/5/8/9/3/webfont.png)
ウェブフォントは、HTMLと共にフォントファイルもダウンロードして使用
ウェブフォントの基本的な使い方に関しては、記事「望みのフォントで表示できる!ウェブフォントの使い方」でも解説しています。
![画像とは異なり、何種類でも配色・サイズを自由に作れる](https://imgcp.aacdn.jp/img-a/800/auto/aa/gm/article/4/3/5/8/9/3/iconpin.png)
画像とは異なり、何種類でも配色・サイズを自由に作れる
しかし、「ウェブフォント」なら、フォントファイルを1つ用意するだけで済みます。アイコンの色や大きさは、通常の文字と同じように、CSSを使えば自由に指定できます。1つのフォントで、6種類でも60種類でも、好きなだけ配色やサイズの異なるバリエーションが作れるのです。
数個のアイコンのために、数百種類ものアイコンを含んだフォントをダウンロードさせる?
![アイコン用フォントの中には、使わないアイコンも多数ある](https://imgcp.aacdn.jp/img-a/800/auto/aa/gm/article/4/3/5/8/9/3/insidewebfont.png)
アイコン用フォントの中には、使わないアイコンも多数ある
しかし、いくらウェブフォントの方がサイズが小さくて済むとはいえ、たった数個のアイコンを使うためだけに、数百種類ものアイコンデータを含んだフォントをダウンロードさせるのは、無駄が多いようにも感じられるでしょう。
使用するアイコンに限定した、最小限のフォントファイルを作る
![使いたいアイコンだけをフォントファイルに含めてくれる「IcoMoon」](https://imgcp.aacdn.jp/img-a/800/auto/aa/gm/article/4/3/5/8/9/3/icomoonsite.png)
使いたいアイコンだけをフォントファイルに含めてくれる「IcoMoon」
これなら、本当に必要なアイコン(フォント)データだけをダウンロードさせられるので、無駄がなくなります。
![使いたいアイコンだけを選択](https://imgcp.aacdn.jp/img-a/800/auto/aa/gm/article/4/3/5/8/9/3/iconchoose.png)
使いたいアイコンだけを選択
- 使いたいアイコンだけを含んだフォントファイルを生成し、
- そのフォントファイルを使ってウェブ上にアイコンを表示
させてみましょう。