littleboxは画像を用いずにCSSだけで作られたシンプルなアイコンセットです。どれも小さくて可愛らしいデザインが特徴的で、使い方も非常に簡単。国旗のアイコンなんかも用意されています。
littleboxの使い方
このようなアイコンをCSSだけで表示させることができます。
以下は国旗のアイコンです。
中にはアニメーションが付いているアイコンもあったりしておもしろいですね。
littleboxの使い方は、まずダウンロードしたCSSファイルをhead内に読み込みます。
<link rel="stylesheet" type="text/css" href="lib/littlebox.min.css" /> <link rel="stylesheet" type="text/css" href="lib/bootstrap.min.css" />
そして以下のようにアイコンをマークアップすればOKです。
<div class="lb-icon lb-*"></div>
「*」の部分は各アイコンによって異なります。littleboxのページで自分が使いたいアイコンにマウスオーバーして確認することができます。
実際に使ってみましたがとても簡単に実装することができるので手間もかからずいい感じでした。CSSのクラス名を変更するだけでアイコンを気軽に変えることができるので管理もしやすいと思います。
アイコン自体もシンプルなのでどんなサイトにも合いそうですね。
というわけで、CSSだけを使ってアイコンを表示させたいという方は、是非littleboxをチェックしてみてはいかがでしょうか？
