Font AwesomeをCSS内に定義して使う方法

css

最近ではすっかりメジャーになったFont Awesomeを使っているサイトも増えたのではないでしょうか。

今回は、Font AwesomeをHTMLで直接指定して使う方法ではなく、CSS内でFont Awesomeを定義する方法を紹介します。

[スポンサーリンク]

このページでやること

Font AwesomeをCSSへ定義する方法を紹介します。

Font Awesomeアイコンを選択します。

まずはFont Awesomeのサイトで使用するアイコンを選択します。
今回はダイヤモンドを選択します。
font-awesome-css1

赤丸部分の番号をコピーしておきます。
font-awesome-css2

Font AwesomeをCSSへ定義します。

CSSへ先ほどのアイコン番号を定義します。

.diamondicon:before {
	color: #004E9E;
	font-size: 50px;
	content: "\f219";
	font-family: FontAwesome;
}

こちらはHTML部分です。

<p>ダイアモンドのアイコンをCSSで表示しています。</p>
<div class="diamondicon"></div>

デモ

実際に動かすことが出来ます

さいごに

Font AwesomeはCSSに定義しなくても、クラス名さえ指定すればHTMLの中から直接呼び出すことができますが、色を変えたり大きさを変えたりなどの装飾をするにはCSSを使う必要があります。

Font Awesomeを使っているサイトはだいぶ増えてきました。HTMLから直接使う方法もCSSへ定義して使う方法もどちらもいつでも使えるようにおさえておきましょう!

それでは!