Font Awesome は サイト上で使われる多種類のアイコンを画像でなく「Webフォント」として利用できるようにしたものです。フォントとして使えるため、サイズや色などすべて CSS で調整できるのでとても便利です。使い方を覚えて大いに利用しましょう。
使うにあたっては、初歩的なHTMLとCSSの知識を少し必要とします。

font-aw01

Font Awesome を使うには、必要ファイルをダウンロードする方法と、 CDN （コンテンツデリバリーネットワーク）を利用する方法がありますが、ここではCDNを使う方法を紹介します。

文章の頭にアイコンを付けたい！　（ある日の受講者さんとの会話）

受講者：かんたんに文章やリストの前にアイコンを付けたいのですが。
　講師：通常は画像のアイコンを用意して、文章の前に設定します。
受講者：以前やってみましたが、画像を用意して位置を調整してとても面倒でした。
　講師：アイコンの種類は限られますが、Font Awesome を使えば簡単ですよ。
受講者：Font Awesome ってどんなんですか？
　講師：一種の「Webフォント」でアイコンを文字のように扱えます。
受講者：アイコンは、何種類くらいあるのですか？
　講師：1000以上あると思いますが、外国産なので気に入るアイコンがあればいいのですが。
　　　　これはホームアイコンですが、こんな感じでいいんですか。
受講者：そうそうこんな感じ！ぜひ一度、使ってみたいです。
　講師：では、使い方をなるべく簡単に説明しますね・・・

１．サイトのhead 要素内にコードを追加します。

初心者さんにはいきなりハードルが高いと思う方もいらっしゃると思いますが、ここだけクリアできれば後は簡単だと思いますので頑張ってください。
ワードプレスの場合「外観」⇒「テーマの編集」からヘッダー（header.php）ファイルを編集して下記のコードを一行を追加します。head 要素内の最後の行あたりに追加すればよいです。（/headの直前に置くといったほうが分かりやすいですかね）

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

２．次に使いたいアイコンを選択します。

本家サイトのアイコンの一覧はこちらからどうぞ。

日本語で探すには、こちらのサイトも参考になると思います。
よく使うFontAwesomeの日本語まとめ作ってみたよ。コード検索とかに手こずったりするので参考にしてみてね！

３．選択したアイコンを使って記事を書いてみましょう。

車のアイコン「fa-car」を選んでみました。
class に 「fa」と 各アイコンに割り当ての「fa-car」を使います。下記の例では「i」要素が利用されていますが「p」要素や「span」要素や「strong」要素などでもOKです。要素の間には何も記入する必要はありません。

<i class="fa fa-car"></i> fa-carのアイコンが表示されました。

fa-carのアイコンが表示されました。

４．アイコンの大きさを変更してみます。

「Font Awesome」のアイコンは、画像ではなくテキストですから、通常の文字と同様にCSSを使って装飾ができます。 下記のように記事内にstyleで記述していく方法が簡単です。

<i class="fa fa-car" style="font-size:3em"></i> fa-car フォントサイズ：3em

fa-car フォントサイズ：3em

５．アイコンの色も変更してみます。

同様に色の変更をstyle内に追加していきます。

<i class="fa fa-car" style="color: green;font-size:3em"></i> fa-car カラー：グリーン/フォントサイズ：3em

fa-car カラー：グリーン/フォントサイズ：3em

６．いろいろアイコンを試してみました。

そのまま
　青でややおおきく
　赤でややおおきく
　青でおおきく
　赤でおおきく

そのまま
　青でややおおきく
　赤でややおおきく
　青でおおきく
　赤でおおきく

ホームアイコン
チェックアイコン
ダウンロードアイコン
注意アイコン
カートアイコン