アイコンフォント終了のお知らせ? CSSオンリーでつくるアイコンセットが凄い!

bootstrap や foundation のようなCSSフレームワークで、あたり前のようについてくるようになったアイコンフォントですが、早くもつぎの世代に突入か?と思わせるコードがあったので紹介します。

CSSでつくられたアイコン

See the Pen Pure CSS Iconex Flat Icon Set by Alireza Attari (@alireza_attari) on CodePen.

See the Pen Pure CSS Google logos by Pan Kex (@PanKex) on CodePen.

See the Pen Pure CSS3 Icons (Strictly Single Element) by Zahin Omar Alwa (@zahinize) on CodePen.

See the Pen Pure CSS3 arrow icons by eMaj (@eMaj) on CodePen.

See the Pen Computer Monitor and Laptop pure CSS by Will Paige (@willpaige) on CodePen.


現在のアイコンフォントのメジャーセットは「Font Awesome」だと思いますが、アイコンフォントはユーザにフォントファイルをダウンロードさせるのでどうしてもスピードを犠牲にしてしまいます。

このCSSアイコンなら純粋にスタイル定義だけなので気軽+最軽量で、まだまだアイコンの種類が十分じゃない&ブラウザ側のCSS3対応が完璧じゃないという問題があったとしても、これからドンドン解決していく問題なので今から抑えておいて損はありません。