「ICONO」はピュアなCSSの記述だけで、簡単にアイコンを実装できるスタイルシートです。
画像やWEBフォントさえも使用しておらず、擬似要素や様々なプロパティを使用してCSSのみで表示させています。
カラーの変更もCSSで簡単に変更可能です。
使用方法は、
|
1 2 3 |
<link rel="stylesheet" href="icono.min.css"> |
を読み込み、あとは、要素に表示させたいアイコンのクラスを記述するだけで簡単に実装できます。
|
1 2 3 4 5 6 7 |
<i class="icono-home"></i> <div class="icono-home"></div> <span class="icono-home"></span> |
色の変更も、下記のように、カラー変更やサイズ変更が容易にできます。
|
1 2 3 4 5 6 7 8 9 |
.icono-home { color: #2ba5bb; } .icono-home { transform: scale(2); } |
関連記事
15.01.18
レスポンシブwebデザインに向くサイト、向かないサイトを考える。
こんにちは。webクリエイターのKEiSoNです。 最近特にレスポンシブwebデザインでお願いしたいという声をクライアント様からよく頂きます …
19.07.13
Liquid とは？ テンプレートタグの使い方。Shopifyのカスタマイズ。
Liquidとは、Rubyベースのテンプレートエンジン Shopifyのコードを触ってみたいが、どうやって触るんだろう？ ということで、ちょ …
15.05.24
デザイナーは旅をしよう。伝説のクリエイター、ジョン・C・ジェイ氏が伝える「若いデザイナーたちへの10のレッスン」
「情報は知識ではありません。グーグルで答えが見つけられるからといって、それだけに頼っている人は、世界を理解しているとは言えない。」ー Joh …
19.01.15
カスタム投稿の特定のシングルページ・アーカイブページの条件分岐のメモ。
カスタム投稿タイプでの、アーカイブページと、シングルページを指定した条件分岐の書き方です。 通常の、投稿だと、is_archive()とis …
19.06.20
WordPressに特化したWEBサイト制作サービス「WPer.」をリリースしました。
ここ数年、Wordpressの案件が非常に増えて来た中で、気がつけば、何百ものWEBサイトをWordpressで制作し、納品をしてきました。 …
