ITエンジニア/デザイナ向けにオープンソースを毎日紹介

またしても使い勝手の良さそうなアイコンフォントが出てきましたよ!

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風や各種ソーシャルサービス向けのアイコンが勢揃いしています。

ではここからアイコンをざざっと紹介します。

一般アイコン。シンプルで使い勝手良さそうですね。
一般アイコン。シンプルで使い勝手良さそうですね。

バッテリー状態などもあってスマートフォンでも便利そう。
バッテリー状態などもあってスマートフォンでも便利そう。

こちらはiOS 7風。
こちらはiOS 7風。

スマートフォン最適化サイトで使うと効果的!
スマートフォン最適化サイトで使うと効果的!

ソーシャル系。Androidもあったりします。
ソーシャル系。Androidもあったりします。

Web Fontの良いところはやはり単色ながらも色を自由に変更できるところとサイズの変更が自由であるということでしょう。ボタンの上に配置するのもWeb Fontのが使い勝手が良いはずです。画像に比べると多少サイズが大きくなってしまうのが難点ですが、一旦読み込まれてしまえばキャッシュが使えますし、ネットワークが高速なデスクトップでは気にならないと思います。

IoniconsがGoogle Web Fontsに取り込まれてくれればCDNによる配信になりますのでさらに安心して使えるようになりそうですね!

IoniconsはMIT Licenseのフォントです。

Ionicons: The premium icon font for Ionic Framework

driftyco/ionicons

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2