Web Fontを使ったソーシャル系サービスアイコン集「OpenWeb Icons」
OpenWeb Iconsはソーシャル系サービスを表現するのに使えそうなWeb Fontです。
文字の横にちょっとしたアイコンを載せるとその意味がぐっと分かりやすくなることがあります。そんな時にはこれまでごく小さなアイコン画像を使うのが一般的でしたが、今回はWeb Fontを使ったOpenWeb Iconsを紹介します。
サンプルです。
実例です。こういう使い方は良いですね。
HTMLでの指定方法です。Bootstrapライクです。
OpenWeb Iconsは現時点で19種類のアイコンが登録されています。EOT/WOFF/TTF/SVGで作成されており、それぞれをCSS上で読み込んで使います。なおBootstrapと組み合わせることで、Bootstrapのアイコンのように指定して使えるようになっています。クラス名に-coloredをつけるとカラーになります。
OpenWeb IconsはCreative Commonsのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
アイコン画像ではなくWeb Fontを使うメリットとしては、サイズを拡大しても奇麗なままであるというのがあげられます。また、色も自由に選択できます。難点としてはフォントなので白黒しか表現できないことにあるでしょう。また、Web Fontに対応していないブラウザもまだ多いという問題もあります。
しかしWeb Fontは対応しているブラウザであれば奇麗に、対応していないブラウザでも文字として必要な情報は送れるというメリットがあります（OpenWeb Iconsではそれは困難ですが）。そうしたアクセシビリティ向上のための施策として考えてみるのも面白いです。