CSSのみで作られたシンプルなアイコンセットを公開している「icono」

icono

CSSのみでこれだけのアイコンを表現できるんですね。

iconoの導入方法

サイトに取り入れるのも簡単でダウンロードしたスタイルシートをアップロード後、下記のようにコードをhead内にリンクさせるだけ。

<link rel="stylesheet" href="icono.min.css">

あとは実際にサイトを見て取り入れたいアイコンをクラス指定するだけという手軽さです。

例えば一番最初にある家の形をしたアイコンなら下記のような感じで入れれば表示されます。

<p class="icono-home">HOME</p>

bootstrapにはないような可愛くてシンプルなアイコンなのでどんなデザインにも合いそうです。

  • Pocket
  • LINEで送る
  • このエントリーをはてなブックマークに追加

コメントを残す




関連記事

Webデザインに関連するテクニックやツール人気の役立つネタだけを厳選して紹介している「デザインフィードデータベース」
角丸・グラデーション・影・透過を表現するCSS3コードを自動生成してくれるジェネレータ「CSS3 Generator」
好きな色や大きさにカスタマイズしたアイコンを無料でダウンロードできる「PNGify Me」が便利!
顔バレを防げてSNSのアイコンにも使えるBrickapic。簡単にレゴ風自画像が作れて便利!
Google Mapの制作に便利!サササッとGoogleMapの地図を埋め込む「0円のマップ屋さん」が素敵
Webデザインをする時に参考にしたいウェブデザインのまとめサイト ※国産サイト
PDFが劇的に圧縮される!無料・オンラインでPDFの容量を減らすSmallpdf.com
無料で使えるロゴをダウンロードできる素材集サイト「LogoInstant」
ソースのストックするならこの中から!ソースコード管理・整理に便利なオンラインのスニペットツール7選
WEB制作で無料写真素材を探すならPixabay!高品質で素敵な画像が役立ち過ぎる!
Web制作のグラデーションに便利なCSS3ジェネレーターまとめ ※随時更新
サイトの配色に困った時に簡単にバランスの取れた色を選ぶことができる調和配色アプリ「HUE/360」
HTMLとCSSをリアルタイムにプレビュー確認できるWebサービス「CSSDesk」
Webデザインの参考になるイケてるサイトを集めたギャラリーサイト「イケサイ」
.htaccessや.htpasswdなどの生成してくれる「lufttools」がすこぶる使える!

Menu

HOME

 TOP