[CSS]CSSでアイコンを実装できるICONOを使ってみた。

CSSだけでアイコン付けれるっていいじゃない。WEBフォントとか使わなくていいなんてステキじゃない。ノーブラの日ってサイコーじゃない。

iconoは画像を使わずに、好きなとき好きなところで好きなようにアイコンを付けれるCSSです。褒めすぎ。
WEBフォントやSVGでもいいんですが、めんどくさがりでCSS大好きな下山としてはアイコンと言えばicono1択になるわけです。だから褒めすぎ。
それではどうやったらアイコン三昧になれるか解説していきます。解説ってほどでもないけど。

iconoのダウンロード

iconoへ行ってCSSでもGithubでも好きなほうをどうぞ。
sassとかlessとかやってる方はGithubのほうが便利かもね。
普通にCSSだけ使いたい方は「Download icono.min.css」でいいと思います。
※Githubにもdistディレクトリ内にicono.min.cssが入ってます。

icono.min.cssを読み込む

<link rel="stylesheet" href="css/icono.min.css">

例えば

<ul>
	<li><a href="#"><i class="icono-home"></i>HOME</a></li>
	<li><a href="#"><i class="icono-user"></i>ABOUT</a></li>
	<li><a href="#"><i class="icono-camera"></i>PHOTOGRAPH</a></li>
	<li><a href="#"><i class="icono-facebook"></i>FACEBOOK</a></li>
	<li><a href="#"><i class="icono-twitter"></i>twitter</a></li>
	<li><a href="#"><i class="icono-gplus"></i>google+</a></li>
</ul>

このままだとアイコンが大きすぎるのでtransformで小さくしてあげます。

CSS

ul {
  list-style: none;
}
ul li a {
  text-decoration: none;
  color: #888;
}

.icono-home, .icono-user, .icono-camera, .icono-facebook, .icono-twitter, .icono-gplus {
  color: #888;
  -moz-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
}

ついでにcolorプロパティで色も付けてあげました。

できあがったデモがこれ

まとめ

CSSだけで手軽にアイコンが使えるなんて便利ですよね。
しかし小さくするのにtransform使わなきゃならんとはIE8以下撃沈。