「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); } |
関連記事
21.01.13
Shopifyのテーマファイルの構成を詳しく解説します。
Shopifyのテーマファイルについての解説動画を公開しました。 今回は、Shopifyのデザインやシステムの処理をもう少し本格的にカスタマ …
16.01.14
MW WP Formで、郵便番号入力時の自動住所入力を設置する。
wordpressのお問い合わせフォームプラグインの定番といえば、「contactForm7」が有名ですが、「MW WP Form」のほうも …
17.09.22
プロンポンの「TCDC」が「AIS DESIGN CENTER」に変わっていました。
久しぶりにバンコクで仕事をしています。 久々にTCDCで仕事をしてみようと思い、プロンポンのエンポリアムの5Fに行ってみたのですが、いつもと …
20.10.18
webサイト制作の料金が人や会社によって全然違う理由を徹底的にお話しします。
今日は、webサイト制作の料金が人や会社によって 全然違う理由を説明していきたいと思います。 僕は10年ほどweb制作の仕事を …
15.11.21
Sublime Text を使いやすくするプラグイン設定11つ
webサイト制作のコーディング作業でSublime Textを使用するときは、インストールしてそのままだと使い勝手があまりよくないので、最低 …
