一手間だけでWebページをちょっとおしゃれな雰囲気に変える方法【css】


概要


フリーで使えるおしゃれなアイコンを使います。実はアイコンはフォントですので、ピクトやシャドウのように使えます。カラフルに使うのは面倒ですがやろうと思えば、難しくはありません。

ほぼ準備いらずで、簡単にできます。

なにか細かく設定したり、ダウンロードして設置するということもありません。 

やり方



やり方は簡単、2STEPだけです。
事前準備もcssを登録するだけ。あとは文字のように使えます。

SIL Open Font License なので商用でもほぼ自由に使用することができます。


Font-Awesome

Font-Awesome


STEP1 CDN用として、CSSを利用する

CDNはクラウドサーバのようなもので、ネット上で自由に使え(引用したり、直接他のサイトからイメージを表示できる)、わざわざDLしてのサイトへの設置は必要ありません。 今回はhtmlなどに1行コピペのcssを書くだけそれを利用できます。

上記のページで 上部にあるナビゲーションの 「Get Started」のリンクをクリックします。
そのサイトから cssの設定文をもらってきます
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

versionが入っているのが気になりますが。。。

STEP2 サイトにコードを記載 

コードもほぼ一覧から選んでコピペするだけです。


同じく上記のページで 上部にあるナビゲーションの「Icon」のリンクをクリックしてください。
一覧から好きなモノを選んでみると、以下の様なコードがあるのでそれを自分のページに貼り付けます。
<i class="fa fa-key"></i>
:上記のアイコン 

普通にフォントなので、大きくしたり、色をつけたり、太字にしたりと自由自在です。

beforeなどに文字として使いたいときは、同じアイコンページに書かれているユニコード(Unicode)をコピーし以下のように頭に¥記号を半角で付けます。またフォントセットを指定する必要があるので、font-familyも以下のように cssに設定します。

.attention:before{
	content: "\f084 \00a0 ";
	font-family: FontAwesome;
}


その他にもアイコンは 600 over!

以降、font-awesome のページに行って、アイコンをクリックしてコピペするだけで他の文字も利用できます。cssの設定等もいりません。

まさに簡単!

awesome は 日本語で言う 「すごい」に近い意味です。昔は悪い意味だけでしたが、カッコいい時にも使うようになっています。たまに映画とかでIt’s awesome!! などと出てきます。

応用例

インフォメーション例です。
注意書きの参考例です。
<blockquote class="info">インフォメーション例です。
</blockquote>

<blockquote class="attention">注意書きの参考例です。
</blockquote>

 

blockquote.info{
	color:#6e6e0e;
	background-color:#fefeee;
	margin-left: 1em;
	border-color:#6e6e0e;
	font-style:normal;
}
.info:before{
	content: "\f05a\00a0 ";
	font-family: FontAwesome;
}



blockquote.attention{
	color:#6e0e0e;
	background-color:#feeeee;
	margin-left: 1em;
	border-color:#6e0e0e;
	font-style:normal;
}
.attention:before{
	content: "\f071 \00a0 ";
	font-family: FontAwesome;
}

その他

Google でも同じようなことができます。150以上アイコンがありそうです。

Screenshot of design.google.com

 

白黒アイコンのおすすめサイト。日本語で検索できる他、サイズや形式、色までも選べます。かなり使いやすいサイトです。

Screenshot of icooon-mono.com

 

ちなみに、画像素材や、音素材は、こちらで紹介しています。

 

Delicious にシェア
Digg にシェア
reddit にシェア
LinkedIn にシェア
LINEで送る
email this
Pocket

332 views.



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です