最近よくアイコンフォントを使っています。
アイコンフォントのメリットですが、
- フォントなのでテキストとのベースラインが合わせやすい
- フォントなので拡大縮小はcssのfont-sizeで指定出来る
- フォントなのでcssで簡単に色を変えられる
- ベクターデータなので背景色があるときなどのエッジの処理を気にしなくていい。
があります。
デメリットとして単一の画像よりは一度に複数のアイコンデータを読み込むので、データ量が多くなる（重くなる）というのがあります。
とはいえ、レスポンシブとかサイズとかカラーバリエーションを考えてpngを作るのも手間です。
今回は、自分がよく使うアイコンフォントを備忘録代わりに書いておきます。
なお、この手のアイコンフォントはアップデート（主にアイコンの追加）が多いので、最新版やIE7以下での対応などは各公式サイトでご確認ください。