またしても使い勝手の良さそうなアイコンフォントが出てきましたよ！ Bootstrapはアイコンの表示に際して画像を使っています。しかしそれでは大きさの変化や色の変更に柔軟に対応できません。そこでFont AwesomeではWeb Fontを使ってアイコンを提供する形をとっています。 今回紹介するIoniconsもまた同様にWeb Fontを使ったアイコン集です。Font Awesomeとはまた違った雰囲気で、450種類を超えるアイコンが提供されています。 使い方はいたって簡単です。Web Fontを配置した後、

<link rel="stylesheet" type="text/css" media="screen" href="ionicons/ionicons.css">

としてIoniconsのスタイルシートを読み込むだけです。後はBootstrapやFont Awesome同様に

<li class="icon-arrow-up-a"></li>

といった指定をするだけになります。通常のアイコンの他、iOS 7風や各種ソーシャルサービス向けのアイコンが勢揃いしています。 ではここからアイコンをざざっと紹介します。 Web Fontの良いところはやはり単色ながらも色を自由に変更できるところとサイズの変更が自由であるということでしょう。ボタンの上に配置するのもWeb Fontのが使い勝手が良いはずです。画像に比べると多少サイズが大きくなってしまうのが難点ですが、一旦読み込まれてしまえばキャッシュが使えますし、ネットワークが高速なデスクトップでは気にならないと思います。 IoniconsがGoogle Web Fontsに取り込まれてくれればCDNによる配信になりますのでさらに安心して使えるようになりそうですね！ IoniconsはMIT Licenseのフォントです。 Ionicons: The premium icon font for Ionic Framework driftyco/ionicons