アイコンフォントの使い方

Webフォントとは、文字（英文や和文）やアイコンの画像データをフォントとして読み込んで表示させるものです。

文字のWebフォントはGoogleフォントが有名ですが、日本語フォントにほぼ未対応といってもいいのでまだ使いずらいかもしれません。

使い方は簡単で、サイトに飛んだら使いたいWebフォントを選んで、「Add to Collection」ボタンを押せば、トレイに入るので、そしたら、「choose」したあと「use」ボタンを押すと、スタイル読み込み用のタグが自動で生成します。

下のような感じ。

nkdesk.com

<link href='https://fonts.googleapis.com/css?family=Balthazar' rel='stylesheet' type='text/css'>

これをhead内に記述し、スタイルシートでfont-familyを下のような感じで指定してあげればOK。

h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; }

アイコンフォントのほうは日本語だろうが英語だろうが関係ないんで非常に使いやすいと思います。

←こんなやつです。

アイコンフォントを提供するサイトはたくさんありまして、どれを選んでいいか悩むと思います。最初は複数のサイトのアイコンがまとまっている下記のサイトが使いやすいでしょう。

ほしいアイコンを選択してから、右上のDownloadボタンを押すと、それらのアイコンが入ったファイルがDLできます。

そいつを解凍すると下図のような感じ。

スタイルシートを読み込まなきゃなので、cssフォルダのfontello.cssを読み込みましょう。（IE7に対応するならfontello-ie7も）

<link rel="stylesheet" href="./fontello-ba9b6ef8/css/fontello.css">
<link rel="stylesheet" href="./fontello-ba9b6ef8/css/fontello-ie7.css">

demo.htmlを開いてみて、好きなアイコンのclassを、

<i class="icon-layout" style="font-size:24px;"></i>

みたいに指定してあげればOKです。

styleで色や大きさを指定してあげれば、普通のフォントと同じように動作させることができます。もちろん画像のように拡大縮小による画像がぼけることもありません。