最近よくアイコンフォントを使っています。
アイコンフォントのメリットですが、
- フォントなのでテキストとのベースラインが合わせやすい
- フォントなので拡大縮小はcssのfont-sizeで指定出来る
- フォントなのでcssで簡単に色を変えられる
- ベクターデータなので背景色があるときなどのエッジの処理を気にしなくていい。
があります。
デメリットとして単一の画像よりは一度に複数のアイコンデータを読み込むので、データ量が多くなる（重くなる）というのがあります。
とはいえ、レスポンシブとかサイズとかカラーバリエーションを考えてpngを作るのも手間です。
今回は、自分がよく使うアイコンフォントを備忘録代わりに書いておきます。
なお、この手のアイコンフォントはアップデート（主にアイコンの追加）が多いので、最新版やIE7以下での対応などは各公式サイトでご確認ください。
目次
アイコンフォントの基本的な使い方
ダウンロードすると
- アイコンのフォントファイル（.eot、.svg、.ttf、.woff）
- スタイルシート
があるので、これをサイト内（WordPress ならテーマやプラグインフォルダ）にコピーします。
そして、スタイルシートをリンクさせます。
マークアップはアイコンフォントによって異なりますが、おおむね <i> タグにクラスを付与するかたちになります。
Genericons
Automatticのアイコンフォント。
JetpackなどAutomattic社製のプラグインやテーマでも多数使われている
- GPL.v2
- 123種類
- マークアップ
<span class="genericon genericon-[icon]"><span>
Foundation Icon Fonts 3
http://zurb.com/playground/foundation-icon-fonts-3
Foundationを出してるZURBのアイコンフォント
- MITライセンス（DLしたcssに記述あり）
- 283種類
- マークアップ
<i class="fi-[icon]"></i>
Font Awesome
http://fortawesome.github.io/Font-Awesome/
元々はBootstrapのアイコンフォントを置き換えるところからスタートしている。
ダウンロードせずともBootstrapのCDNを介して利用可能なほか、less、Sassで使えるRuby Gemも提供。
- Font Awesome licensed under SIL OFL 1.1
- Code licensed under MIT License
- 369種類
- マークアップ
<i class="fa fa-[icon]"></i>
IcoMoon
Web用だけでなくベクターデータ (SVG, PDF & AI)も提供。
アイコンフォントのみを使いたい場合、サイト内のIcoMoon Appというサービスで提供済みのフォントデータの他、自作のsvgデータをアップロードした上で、使いたいアイコンを選択してをアイコンフォントのデータを作成する。
IcoMoon App
- IconMoo-Free のみ GNU General Public License
- IconMoo-Free 450種類
- マークアップ
<span class="icon-[icon]"></span>
他にも多くのアイコンフォントが出回っていると思いますが、とりあえずこんなところで。