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

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

アイコンを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」ページで一覧できます。

出典: Entypo - 250+ carefully crafted pictograms

Feather

丸みを帯びた塗りつぶされていない130種類のアイコンが、ウェブフォントの形や、SVGファイルで得られます。全体的に線で構成されている塗りつぶされていない図柄なので、既存のデザインに合わせやすいかも知れません。

出典: Feather: 130 Free Icons by Cole Bemis

Octicons

比較的塗りつぶしの多い図柄の170種類を越えるアイコンが、フォントファイルの形で得られます。データサイズが小さめなので、気軽に使いやすいでしょう。

出典: Octicons

アイコン以外の文字フォントも使ってみる

「ウェブフォント」とは、ウェブ上に置いたフォントファイルを読み込むことで、文字を望みの書体で表示する仕組みです。例えば「文章を凝った装飾文字で表示したい」という場合にも使えます。文字の表示にウェブフォントを使う方法も押さえておきましょう。

望みのフォントで表示できる!ウェブフォントの使い方

CSS3で追加された「ウェブフォント」機能なら、指定フォントがインストールされていない環境でも、ブラウザがフォントファイルをダウンロードして使ってくれるため、望みのフォントで表示させられます。ウェブフォントの使い方をご紹介!

出典: 望みのフォントで表示できる!ウェブフォントの使い方 [ホームページ作成] All About