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

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

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

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

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

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

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

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

スポンサーリンク
レクタングル(大)広告

CSS ICONとは

CSS ICON -- project by Wenting Zhang

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

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

CSS ICONの図柄すべて

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

CSS ICONの使い方

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

利用したいアイコンをCSS ICONから選択する

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

利用をアイコンのコードが表示

CSSをコピペ

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

CSS ICONのCSSをコピーする

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

.heart.icon {
  color: #000;
  position: absolute;
  margin-top: 6px;
  margin-left: 5px;
  width: 9px;
  height: 9px;
  border-left: solid 1px currentColor;
  border-bottom: solid 1px currentColor;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.heart.icon:before {
  content: '';
  position: absolute;
  top: -5px;
  left: -1px;
  width: 8px;
  height: 5px;
  border-radius: 5px 5px 0 0;
  border-top: solid 1px currentColor;
  border-left: solid 1px currentColor;
  border-right: solid 1px currentColor;
}

.heart.icon:after {
  content: '';
  position: absolute;
  top: 0px;
  left: 8px;
  width: 5px;
  height: 8px;
  border-radius: 0 5px 5px 0;
  border-top: solid 1px currentColor;
  border-right: solid 1px currentColor;
  border-bottom: solid 1px currentColor;
}
AMP等でHTML内で利用するには、ヘッダーにstyleタグを記述して記入しても良いかと思います。

HTMLをコピペ

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

HTMLをクリックしてコピー

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

<div class="heart icon"></div>

CSS ICONの表示例

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

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

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

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

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

CSS ICONデフォルトだと並べるとアイコンが重なってしまう

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

#the-content div.icon {
    display: inline-block;
    position: relative;
}
CSSセレクタは、サイトに合わせて記述する必要があると思います。IDと組み合わせてCSSを記述すると、CSS ICONデフォルトのものよりセレクタの優先度が高くなることから、僕の場合はIDと組み合わせてスタイルを設定しています。

まとめ

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

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

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

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

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

サイト CSS ICON — project by Wenting Zhang