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

[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を読み込む

例えば

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

CSS

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

できあがったデモがこれ

まとめ

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

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク