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

Tips

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

「icono」は画像を使用せずに、擬似要素や様々なプロパティを使用してCSSのみでアイコンを表現したスタイルシートです。
使い方も簡単で必要なファイルを読み込んでクラスを指定するだけで表示させることができ、CSSなのでカラー変更なども容易にできます。
WebフォントやSVG使えばって感じですが、それすらも使いたくない場合はよく見かけるものがひと通り揃っていて良いかなと思いました。

全100種類のアイコン

画像は用意されているアイコンの一覧で、これら全100種類のアイコンをCSSのみを使用して実装することができます。

使い方は必要なCSSを<link rel="stylesheet" href="icono.min.css">という感じで読み込み、あとは要素に表示させたいアイコンのクラスを記述するだけで簡単に実装できます。

どのクラスでどのアイコンを表示させられるかはデモ画面で確認することができ、各アイコンをクリックすると表示される「icono-xxx」をクラスとして各要素に記述していきます。
デモではi要素を使用していますが、下記のようにdivspanでも問題なく使用でき、下記の場合はそれぞれスマイルアイコンが表示されます。

HTML

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

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

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

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

CSS

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

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

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

Posted on

Category : Tips

Close the search window,
please press close button or esc key.