各種ソーシャルサービスのアイコンをWeb Font化「Socialicious」
SocialiciousはWeb Font製、MIT Licenseのオープンソース・ソフトウェアです。
Web Fontを使うアイディアの一つがWebサイトのアイコンです。小さくてたくさん必要なアイコンもWeb Fontであれば管理も簡単でサイズも自由度が高いです。そこで今回はソーシャルサービス系アイコンをWeb Font化したSocialiciousを紹介します。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-09 11.08.49.1373422096.png)
一覧です。色々なサービスのアイコンが並んでいます。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-09 11.09.11.1373422102.png)
実例。Bootstrap用のスタイルシート設定も付属しています。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-09 11.09.38.1373422107.png)
こんな感じにボタンのラベルに使うのもいい感じです。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-09 11.09.46.1373422113.png)
使い方。BootstrapやFont Awesomeと同じ形です。
提供されるサービスは、Bebo/Behance/Bread/Disqus/Dribbble/Facebook/Flickr/FourSquare/GitHub/Goodreads/Google+/Instagram/Klout/Last.fm/LinkedIn/Pinterest/Quora/Reddit/SoundCloud/Spotify/Techendo/Tumblr/Twitter/Vevo/vimeo/WordPress/Yahoo/Yelp/YouTubeとなっています。
MOONGIFTはこう見る
Web Fontは画像のスプライトに比べて、サイズが自由に変更できて奇麗なままというのが利点になります。また、SVGに比べると扱いやすいのが利点です。欠点としては、色が二色しか使えないということでしょうか。しかしフラットなデザインとは相性が良く、シンプルで見やすいデザインに仕上がるはずです。
今後アイコンが追加されたとしてもフォントファイルとスタイルシートを追加すれば良いだけなので運用コストも高くありません。サイズさえ小さければ積極的に使っていく価値が十分あるでしょう。Web Fontは元々リッチなテキストを実現するの使われる雰囲気がありましたが、アイコンでの利用で一気に花開いた感があります。