「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デザインでお願いしたいという声をクライアント様からよく頂きます …
16.02.03
WordPressのユーザープロフィールの項目を新たに追加する。
オウンドメディア等でwordpressを使用してブログ構築をする際、記事を書いた人のプロフィール等を表示したいことがあると思いますが、wor …
13.08.16
wordpressの画像を高速化してサイトの読み込み速度をアップする。
まだまだ課題が残るWORDPRESS高速化。 自分の運営しているWORDPRESSが写真をメインに使用していくブログなので、画像を多用すると …
19.02.03
WordPressの引っ越し時に、アイキャッチ画像も簡単に移行できるプラグイン「Attachment Importer」
サーバ移転時等に、Wordpressのデータを引っ越したいと思うことがあると思いますが、非常に簡単に移行できるプラグインがありましたので、紹 …
20.05.10
Webデザイナーが知っておきたいWebフォントの基礎知識
webサイトには、画像データでアップされたフォントや、PCやスマホに元々入っているデバイスフォント以外に、 「webフォント」という概念のも …
