色もサイズも自由自在！アイコンを綺麗に表示するWebフォント集

ウェブ上に掲載するアイコンは、画像よりもWebフォントを使う方が、望みの配色・サイズで掲載でき、修正も容易で便利です。Webフォントを使ってアイコンを綺麗に表示する方法の解説と、様々な図柄のアイコンWebフォント配布サイトをまとめました。

西村文宏

更新日: 2014年10月17日

アイコンの表示にウェブフォントを使うメリットと、その使い方

ウェブ上でアイコンを表示する場合は、配色もサイズも固定されている「画像」よりも、「ウェブフォント」を使う方が便利です。まずはその理由と、ウェブフォント機能を使ってアイコンを望みの配色・サイズで表示する方法を押さえておきましょう。

アイコンをWebフォントで表示できる「Font Awesome」

豊富なアイコンをWebフォント機能を使って表示できる「Font Awesome」を使ってみましょう。画像ではなく、独自のフォントを使った「文字」でアイコンが表示できる点が特長です。文字なので、CSSを使って望みのサイズ・配色にできます。

リンク：アイコンをWebフォントで表示できる「Font Awesome」 [ホームページ作成] All About

執筆ガイド西村文宏

必要なアイコンだけを選び、軽いウェブフォントを作成

画像よりもウェブフォントの方がデータサイズが小さくて済む場合でも、「多数の使わないアイコン」も含んだフォントファイルをダウンロードさせるのは無駄です。必要なアイコンに限定した独自のフォントファイルを作成すれば、無駄がなく便利でしょう。

使うアイコンだけを含む最小限のウェブフォントを作る

4,600種類を超えるアイコンの中から、自分が使いたいアイコンだけに限定して、専用のウェブフォントファイルを生成してくれるサービス「IcoMoon」を使ってみましょう。たった数個のアイコンを使うためだけに、数百種類ものアイコンを含んだフォントを読み込ませる必要はありません。無駄を排した最小限のアイコン用ウェブフォントが作れます。

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

執筆ガイド西村文宏

フリーのアイコンWebフォント配布サイト集

様々な図柄のアイコンを収録した、フリーのウェブフォントファイル配布サイトはたくさんあります。以下に、お勧めサイト5つをまとめました。いろいろ覗いてみて、気に入った図柄のあるウェブフォントファイルをダウンロードしましょう。

Typicons

全体的に丸みのある300種類を越えるアイコンが、各種ウェブフォントの形、PNG形式の画像、SVGファイルとして得られます。ウェブフォントとして利用するデモHTMLファイルを参考にすると活用しやすいでしょう。

リンク： Typicons

Foundation Icon Fonts 3

シンプルなデザインのアイコン280種類以上が、各種ウェブフォントの形とSVGファイルとして得られます。かなり小さなサイズで表示したい場合に便利なデザインです。使い方はプレビューHTMLを見ればすぐに分かるでしょう。

リンク： Foundation Icon Fonts 3 | Playground from ZURB

Entypo

280種類を越えるアイコンがフォントファイルの形で得られます。ソーシャルアイコンには、mixiのような日本のサービスのアイコンも含まれています。アイコンの指定方法は、配布サイト内の「character map」ページで一覧できます。