当サイトの記事にFont Awesom Iconsというフォントで作られたアイコンが度々登場していますが、今回ご紹介するのはPure CSS IconsというCSSのみで作られたアイコンです。
CSSアイコンのメリットとデメリット
CSSアイコンがフォントアイコンと比較して最も優れている点はファイルサイズです。
フォントファイルはCSSファイルと比べてファイルサイズが大きく、WEBでページを読み込む際に時間がかかってしまいます。
その点、CSSアイコンは基本1つのテキストファイルで済むのでインストールの手間も省け、読み込みも比較的速いので、SEOとしても有利に働くことでしょう。
しかしアイコンの数で言えば、圧倒的にフォントアイコンの方が多いし、種類も豊富です。
今ではFont Awesom Iconsが標準になっていますが、近い将来CSSアイコンが標準になる時代が来るかもしれません。
個人的にはCSSアイコンが主体になるのを願っています！
オープンソース（無料）のCSSアイコン
フォントアイコンと同じように、ほとんどオープンソースのCSSアイコンが多く、誰でも無料で利用することができます。
昔、アイコンを1つ1つ画像で作ってたな…
位置合わせも大変だったな…
便利な時代になりましたね！
種類豊富で綺麗なCSSアイコン
こちらは現在700個以上のCSSアイコンが用意されています。
CSSだけでなく、SVG形式にも対応しているとのこと。
気軽にダウンロードでき、NPMやAPIでの利用も可能とのこと。
シンプルなCSSアイコン
現在、512個のCSSアイコンが用意されています。
これだけあれば十分に使えるレベル。
しかも、アイコンを動的にするアニメーションも用意されていて、とても面白いです。
その他のCSSアイコン
数は少ないですが、例えばファイルの種類や矢印、天気などに特化したアイコンや、FacebookやTwitterなどのSNSアイコンに特化したものもあります。
- Original:https://minory.org/pure-css-icons.html
- Source:Minory
- Author:管理者
Amazonベストセラー
Now loading...