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. CSS

    CSS3でフォントサイズを指定する単位は「rem」がとても便利

    CSS3から新しく出来たフォントサイズ指定の単位「rem」がとても便利…

  2. CSS

    CSSを使って画像にホバーするとキャプションを表示させるエフェクト

    CSSを使ったホバーエフェクトがとてもよかったのでご紹介します。画像に…

  3. Light Modal

    CSS

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

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

  4. Epic Spinners

    CSS

    CSSによる素敵なスピナーコレクション「Epic Spinners」

    Epic SpinnersはCSSで作成された素敵なスピナーコレクショ…

  5. CSSチュートリアルまとめ

    CSS

    CSS初心者のための役立つ75のチュートリアルまとめ

    とても便利で役立つチュートリアル集「75 CSS Tutorial f…

  6. Three Dots

    CSS

    シンプルで可愛いCSSローディングアニメーション「Three Dots」

    Three Dotsはアニメーション付きのシンプルで可愛いCSSローデ…

最近の記事

  1. cheero USB-C PD Charger 60W
  2. DY-S01
  3. OWL-QI10W04
  4. BQ-CC87L

アーカイブ

PAGE TOP