東京のWEB制作会社・成果を出すためのwebサイト制作・リニューアル・Wordpress構築

CSSの記述だけでアイコンを実装できる「ICONO」

pure-css-icons-icono

「ICONO」はピュアなCSSの記述だけで、簡単にアイコンを実装できるスタイルシートです。
画像やWEBフォントさえも使用しておらず、擬似要素や様々なプロパティを使用してCSSのみで表示させています。

pure-css-icons-icono_01

カラーの変更もCSSで簡単に変更可能です。

使用方法は、


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

1

2

3

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

を読み込み、あとは、要素に表示させたいアイコンのクラスを記述するだけで簡単に実装できます。


<i class="icono-home"></i>

<div class="icono-home"></div>

<span class="icono-home"></span>

1

2

3

4

5

6

7

<i class="icono-home"></i>

<div class="icono-home"></div>

<span class="icono-home"></span>

色の変更も、下記のように、カラー変更やサイズ変更が容易にできます。


.icono-home {
	color: #2ba5bb;
}

.icono-home {
	transform: scale(2);
}

1

2

3

4

5

6

7

8

9

.icono-home {

color: #2ba5bb;

}

.icono-home {

transform: scale(2);

}

参考：
http://saeedalipoor.github.io/icono/

15.01.12　|　WEBデザイン制作・IT関連 KEiSoN★

今年はムービー制作にもチャレンジしてます★

一眼レフカメラの選び方① 【初心者向け】〜カメラの種類とセンサーサイズ〜

この記事を書いた人

KEiSoN★ > facebook

スカイゴールド株式会社　代表取締役 / クリエイティブディレクター/webデザイナー

2009年1月よりフリーランスのディレクター/Webデザイナーとして活動しながら、ノマドな働き方を試み始める。
過去16カ国ほど訪れ、一眼レフにその景色を収めながら時々ドローンも飛ばす。2015年11月にスカイゴールド株式会社として法人化。
現在は主に東京を中心にしながら、タイ・バンコクを年間4,5回ほど往復しながら活動中。
Wordpressを使用したオリジナルデザイン制作・オウンドメディア構築を得意とする。
国内外の様々な価値観・デザインに接触することで幅広いクリエイティブや臨機応変にアイデアを提供する。
最近は、Shopify制作の勉強も行なっている。

アーカイブ

最近の記事

>>過去の記事一覧

スカイゴールド株式会社

人気の記事

Jan 27

Shopifyでテイクアウト・デリバリー販売ができる飲食店集客アプリ。(･･･

Jan 27

【2021】Wordpressの致命的な弱点欠陥と、Webサイト制作・リ･･･

Jan 22

[2021]ホワイトハウスのWebサイトがWordpressでリニューア･･･

Jan 13

【初心者向け・実践】Adobe XD・Webデザインの作り方。アニメー･･･

Jan 13

Shopifyで、更新可能な独自パーツを作成する基本的方法を紹介します。

Jan 13

Shopifyのテーマファイルの構成を詳しく解説します。