Webアイコンフォント「Font Awesome」の使用例
フォントオーサム（Font Awesome ）は サイト上で使われる多種類のアイコンを画像でなく「Webフォント」として利用できるようにしたものです。フォントとして使えるため、サイズや色などすべて CSS で調整できるのでとても便利です。使い方を覚えて大いに利用しましょう。
フォントオーサム対応済みのテーマ（Lightning等）を選択している場合は、面倒なプログラムのDLやテーマ編集などの設定作業が不要なので、すぐに使用することができます！！
※今回、フォントオーサムに対応してないのテーマでの利用方法は省きます。
※書くにあたって、多少のHTMLとCSSの知識が必要です。
文章の頭にアイコンを付けたい！ Q＆A
Q：かんたんに文章やリストの前にアイコンを付けたいのですが。
A：通常は画像のアイコンを用意して、文章の前に設定します。
Q：以前やってみましたが、画像を用意して位置を調整してとても面倒でした。
A：アイコンの種類は限られますが、Font Awesome を使えば簡単ですよ。
Q：Font Awesome ってどんなんですか？
A：一種の「Webフォント」でアイコンを文字のように扱えます。
Q：アイコンは、何種類くらいあるのですか？
A：1000以上あると思いますが、外国産なので気に入るアイコンがあればいいのですが。
これはチェックアイコンですが、こんな感じでいいんですか。
Q：そうそうこんな感じ！ぜひ一度、使ってみたいです。
A：では、使い方をなるべく簡単に説明しますね・・・
１．使いたいアイコンを選択します。
本家サイトのアイコンの一覧はこちらからどうぞ。
日本語で探すには、こちらのサイトも参考になると思います。
よく使う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: blue; font-size: 3em;"></i> fa-car カラー：青/フォントサイズ：3em
fa-car カラー：青/フォントサイズ：3em
５．よく使うアイコンを試してみました。
チェックアイコン CSS指定せず
チェックアイコン 赤
チェックアイコン 緑
チェックアイコン青
チェックアイコン おおきく
チェックアイコン 赤でおおきく
チェックアイコン 緑でおおきく
チェックアイコン 青でおおきく
チェックスクエアアイコン CSS指定せず
チェックスクエアアイコン 赤
チェックスクエアアイコン 緑
チェックスクエアアイコン 青
チェックスクエアアイコン おおきく
チェックスクエアアイコン 赤でおおきく
チェックスクエアアイコン 緑でおおきく
チェックスクエアアイコン 青でおおきく
男性 おおきく
女性 おおきく
ホームアイコン
ダウンロードアイコン
回転アイコン
カートアイコン
多少のHTMLとCSSの知識は必要ですが、パターンは一緒ですので、コピペして利用してみてください。
<i class="fa fa-check"></i> チェックアイコン CSS指定せず <i class="fa fa-check" style="color: red;"></i> チェックアイコン 赤 <i class="fa fa-check" style="color: green;"></i> チェックアイコン 緑 <i class="fa fa-check" style="color: blue;"></i> チェックアイコン青 <i class="fa fa-check" style="font-size: 1.5em;"></i> チェックアイコン おおきく <i class="fa fa-check" style="color: red; font-size: 1.5em;"></i> チェックアイコン 赤でおおきく <i class="fa fa-check" style="color: green; font-size: 1.5em;"></i> チェックアイコン 緑でおおきく <i class="fa fa-check" style="color: blue; font-size: 1.5em;"></i> チェックアイコン 青でおおきく <i class="fa fa-check-square"></i> チェックスクエアアイコン CSS指定せず <i class="fa fa-check-square" style="color: red;"></i> チェックスクエアアイコン 赤 <i class="fa fa-check-square" style="color: green;"></i> チェックスクエアアイコン 緑 <i class="fa fa-check-square" style="color: blue;"></i> チェックスクエアアイコン 青 <i class="fa fa-check-square" style="font-size: 1.5em;"></i> チェックスクエアアイコン おおきく <i class="fa fa-check-square" style="color: red; font-size: 1.5em;"></i> チェックスクエアアイコン 赤でおおきく <i class="fa fa-check-square" style="color: green; font-size: 1.5em;"></i> チェックスクエアアイコン 緑でおおきく <i class="fa fa-check-square" style="color: blue; font-size: 1.5em;"></i> チェックスクエアアイコン 青でおおきく <i class="fa fa-male" style="color: blue; font-size: 1.5em;"></i> 男性 おおきく <i class="fa fa-female" style="color: red; font-size: 1.5em;"></i> 女性 おおきく <i class="fa fa-home"></i> ホームアイコン <i class="fa fa-download"></i> ダウンロードアイコン <i class="fa fa-spinner fa-spin"></i> 回転アイコン <i class="fa fa-shopping-cart"></i> カートアイコン
投稿の表示が華やかになって、かつ読みやすくなると思います。