CSSのみでアイコンフォント風の図柄を表示できる「CSS ICON」の使い方

最近、AMPに対応しているサイトも結構増えてきました。

AMPは、モバイル端末で高速表示されるように最適化されたものなので、非常に仕様に厳しい制限があります。例えば、決まったJavaScriptをしか呼び出せないとか、外部CSSを読み込めないとか。

で、サイトなどに使われているFont Awesomeも（現時点では）その制限に引っかかってしまいます。なので、サイトなどでワンポイントとして使用していたアイコンフォントなどが使用できないなんて事が起こります。

ただ先日、CSS ICONという、ピュアCSSのみで書かれたアイコンのライブラリがあるということを知りました。

これを利用すると、こんな感じのアイコンをCSSのみで表示させることができます。

これだと、AMPページヘッダーのstyleタグにCSSを書きさえすれば、利用できます（50KB以内であれば）。

そんなわけで、CSS ICONを試しに使ってみたので、使い方や使用感について書きたいと思います。

CSS ICONとは

CSS ICONは、CSSのみで描画されたアイコンを表示させることができるコードが集められたアイコン集です。

この記事を書いた2016年11月時点では500以上のアイコンを利用することができます。

CSSのみで描かれたものということなので、思いっきり簡素なものと思いきや、かなり実用的なアイコンがそろっています。

CSS ICONの使い方

アイコンを利用するには、まずCSS ICON利用したいアイコンを選択します。

すると、画面右側に「アイコンを利用するためのコード」が表示されます。

CSSをコピペ

これを利用するには、まずCSSをコピーします。

すると、以下のような行動がクリップボードに貼り付けられるので、CSSファイルなどに貼り付けます。

HTMLをコピペ

次に、HTMLをコピーします。

コピーした以下のようなHTMLは、サイト上の表示したい箇所に貼り付けてください。

CSS ICONの表示例

すると、HTMLを貼り付けた箇所に以下のようなアイコンが表示されます。

CSS ICONを利用する上での注意点

CSS ICONデフォルトの状態だと、CSSに「position: absolute;」と「display: block;」の設定がデフォルトでされています。

なので、当記事冒頭のように以下のようにアイコンを並べたとします。

すると、デフォルト状態だと、以下のように重なった表示になるかもしれません。

これを回避する方法として、僕の場合は以下のようなCSSで.iconクラスを上書きしています。

まとめ

CSS ICONは、スタイルシートにて描画されたアイコンになるので、以下のような難点はあると思います。

• あらかじめCSSコードをスタイルシートに記述する必要がある
• 並べて表示するにはデフォルトのCSS設定を変更する必要がある
• 拡大などをするにはtransform: scale(2);等を使用する必要がありややこしい

なので、ちょっとした手間がかかります。

ただ、どうしてもFont Awesome等のアイコンフォントが使用できない環境（例えばAMPページとか）では、使い方さえ分かってしまえば、結構重宝するかもしれません。

AMPページなどでも、SVGファイルを画像として読み込めば良いだけかもしれません。けれど、SVGファイルを作成するよりも、スタイルシートだけで表現できるCSS ICONの方が、かなり手軽だったりします。

サイト CSS ICON — project by Wenting Zhang