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

  • Posted on
  • Category : 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);
}

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

Back to Top

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

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

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。