WEBアイコンフォントの font-awesome を背景として指定する方法

WEBアイコンフォントで有名な「font-awesome」のアイコンを、h1などの標題で使う際、各ページの標題に埋めるのもメンテナンスが大変なので、背景に出来ないかと思ったので、その方法を備忘録としてポストします。

CSSで font-awesome を背景指定

例1. 前に置く

例として、チェックボックス風のアイコンを使ってみます。
HTMLは以下のような非常に単純な作りでOKです。

HTML

CSS

結果

ポイント

CSSの表記はたった２行。キモは content に書かれているコードです。
これは使いたいアイコンフォントの詳細画面に書かれている UNICODE (ユニコード)です。

↑これ

バックスラッシュ（\）から始めることが必須なので、忘れないように。

例2. 後ろに置く

今度は逆のパターン。想像はつくとは思いますが、一応。

結果

デモ

デモはこちらから

font-awesome の使い方

たまーに使い方を忘れるので、以下に使い方をまとめておきます。

CDNでリンク or ダウンロード

リンク方法の詳細はこちらから（英語）

ちなみに個人的にダウンロードは1回もしたことがなく、100％CDN経由で使用しています。
CDNでの使用の場合は指定のコードをHTMLヘッダー内に埋め込みます。

CDNのリンク先としては以下のサイト様で紹介されているものが使えるようです。

埋め込みHTMLの例

使い方

HTML

先程使用したチェックボックスアイコンを使う場合は以下のように。
<i> タグを使用します。

公式の使用方法解説ページ

ここを読めば、使い方はわかると思います。

-HTML,CSS
-font-awesome, icon, アイコン