「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.07.18
多言語サイト制作をする際に最低限抑えておきたいSEO対策
最近は、2020年に控えている東京オリンピックや、グローバル化が著しく進んでいる影響、日本国内のマーケットだけでは今後のビジネス展開が厳しいと感じてきている人も増えている影響で、中小・零細企業も多言語サイト制作をする必要 …
20.06.04
【体験談】 Webデザイナーがキツい仕事だと感じる、必ず体験する5つのこと。
今回は、webディレクター/デザイナーとして起業している僕が、 web制作の仕事ってキツい仕事だな感じることを体験談をもとに5つお話ししたいと思います。 納期と労働時間 まず一つ目が納期と労働時間ですね。皆さんも聞いたこ …
12.10.28
イギリスからのお客様
昨日、新規開業されてこれからサービスを開始されるイギリスの現地ツアー会社様から、偶然にもロンドンオリンピックの日に正式にご発注をいただき、その代表者様と奥様が日本に来られるということで初対面。 制作の前には、お会いしてお …
18.12.13
スマホデザイン制作時にユーザーフローチャートを簡単に作成できるツール「Overflow」がかなりおすすめです。
スマホのUIデザインの制作時に、ユーザーフローチャートを作成する機会があるのですが、その際に、便利なツールがないかなあと思って調べたところ、「Overflow」というかなり便利そうなツールがベータ版ですが、リリースされて …
16.02.03
WordPressのユーザープロフィールの項目を新たに追加する。
オウンドメディア等でwordpressを使用してブログ構築をする際、記事を書いた人のプロフィール等を表示したいことがあると思いますが、wordpressの、デフォルトのプロフィール情報だけでは足りない場合、ユーザープロフ …
