CSSだけで作られたシンプルで可愛いアイコンセット「littlebox」

littlebox

littleboxは画像を用いずにCSSだけで作られたシンプルなアイコンセットです。どれも小さくて可愛らしいデザインが特徴的で、使い方も非常に簡単。国旗のアイコンなんかも用意されています。

littleboxの使い方

このようなアイコンをCSSだけで表示させることができます。

littleboxのアイコン

以下は国旗のアイコンです。

国旗のアイコン

中にはアニメーションが付いているアイコンもあったりしておもしろいですね。

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のクラス名を変更するだけでアイコンを気軽に変えることができるので管理もしやすいと思います。

アイコン自体もシンプルなのでどんなサイトにも合いそうですね。

littlebox

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

オススメ商品

Archives