littlebox

CSS

CSSだけで作られたシンプルで可愛いアイコンセット「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

関連記事

  1. Alerts.css

    CSS

    シンプルでピュアなCSSによるアラート実装「Alerts.css」

    Alerts.cssはシンプルでピュアなCSSを使ったアラートを実装で…

  2. CSS

    CSSの:beforeと:afterを使ってちょっとした装飾をつけてみる

    CSSの:beforeと:afterを使ってちょっとした装飾をつけるこ…

  3. CSS

    CSSだけを使ったストライプ(斜め・水平・垂直など)の作り方

    CSSだけを使ったストライプの作り方「Stripes in CSS」が…

  4. Light Modal

    CSS

    パワフルでカスタマイズ性に優れたCSSモーダル「Light Modal」

    Light Modalは、軽量・パワフルでカスタマイズ性に優れたCSS…

  5. Media Queriesの@media
  6. Animated Transition Effects

最近の記事

  1. KMC-80BK
  2. 味噌ラーメン〜旨辛にんにく味噌〜
  3. STP-XH70
  4. 久保田城

Instagram始めました

Facebookページ

PAGE TOP