UPDATE : 2014/10/11

アイコンフォントを使うフォントだけにするとかなり便利

複数のアイコンフォントから、使用するフォントだけのフォントセットを作って使用します。使えるフォントアイコンも増えて、ファイルサイズも抑えることができます。

Font Awesomeや、Entypoなどのアイコンフォントは使わないフォントも多いので、使用するフォントだけでフォントセットを作って使います。

フォントセットを作るメリット

ファイルサイズが少なくなる。
Font AwesomeやEntypoなど、複数のアイコンフォントから好きなフォントを選択してフォントセットが作れる。
作業効率があがる。
SVGファイルも生成してくれる。

IcoMoonでフォントセットを作る

フォントセットが作れるサイトはいくつかありますが、「IcoMoon」が気に入っています。

使いたいフォントを選択

使いたいフォントを選択していきます。

icomoon-flow01

使いたいアイコンフォントを選ぶ時はフッターの「Add Icons From Library...」から、アイコンフォントを選べます。

20以上のアイコンフォントが用意されています。

icomoon-cap

使用するフォントを選択したら、SVG またはFontどちらかを選んでダウンロードします。
今回は「Font」をダンロードします。

icomoon-flow03

ダウンロードファイルの中身

Fontファイル（ttf、woff、eot、svg）のほか、選択したフォントを使用したdemo.htmlが同梱されています。

icomoon-set

このdemo.htmlを表示させると、アイコン名や、CSSで使う文字コードが記載されています。便利ですね。

icomoon-set-demo

アイコンフォントを使う準備

使うファイルは「fonts」フォルダと、style.cssです。

CSSのlinkタグを設定します。

ページのhead要素内に、CSSのlinkタグを設定します。
サンプルでは「css」ディレクトリに移動させて、style.cssを「font-style.css」にリネームして記述しています。

サンプル

[html]
<link rel="stylesheet" href="css/font-style.css">
[/html]

font-style.cssを「css」ディレクトリに移動させているので、font-style.cssのfontリンク先を変更します。

サンプル

[html]
src:url('../fonts/icomoon.eot?w2ltft');
src:url('../fonts/icomoon.eot?#iefixw2ltft') format('embedded-opentype'),
url('../fonts/icomoon.woff?w2ltft') format('woff'),
url('../fonts/icomoon.ttf?w2ltft') format('truetype'),
url('../fonts/icomoon.svg?w2ltft#icomoon') format('svg');
[/html]

このあたりは、ウェブサイトの構築内容に合わせて適宜変更して下さい。

Font AwesomeのCSSを少し追加

Font AwesomeのCSSを追加すると、Font Awesomeで使っている「fa-2x（フォントサイズ２倍）」などのCSSが利用できます。
アイコンフォントを使い慣れている人は、使いやすくなるかと思います。（CSSはMIT Licenseなので大丈夫だよね？）

[html]

.fa-lg {
font-size: 1.33333333em;
line-height: 0.75em;
vertical-align: -15%;
}
.fa-2x {
font-size: 2em;
}
.fa-3x {
font-size: 3em;
}
その他、お好みでCSSを追加。

[/html]