Pure CSSでアイコンを実装できるスタイルシート「icono」

「icono」は、画像を使用せずに擬似要素や様々なプロパティを使用してCSSのみでアイコンを表現したスタイルシートです。
使い方も簡単で必要なファイルを読み込んでクラスを指定するだけで表示させることができ、CSSなのでカラー変更なども容易にできます。

「icono」のアイコン一覧イメージ

アイコンは上のイメージのような見栄えで用意されており、これら全100種類のアイコンをCSSのみを使用して実装することができます。

使い方は必要なCSSを<link rel="stylesheet" href="icono.min.css">で読み込み、あとは要素に表示させたいアイコンのクラスを記述するだけで簡単に実装できます。
どのクラスでどのアイコンを表示させられるかはデモ画面で確認することができ、各アイコンをクリックすると表示される.icono-xxxをクラスとして各要素に記述していきます。
デモではi要素を使用していますが、下記のようにdivやspanといった別要素でも問題なく使用でき、下記の場合はそれぞれスマイルアイコンが表示されます。

<i class="icono-smile"></i>

<div class="icono-smile"></div>

<span class="icono-smile"></span>

また、CSSなのでカラーやサイズの変更も容易にでき、上記で使用したスマイルアイコンであれば下記のようにcolorやtransform: scale()を指定してサイズやカラーを変更できます。

/* change color */
.icono-smile {
  color: #2ba5bb;
}

/* change size */
.icono-smile {
  transform: scale(2);
}

実際の表示や詳細については以下でそれぞれ確認できます。