Font Awesome は サイト上で使われる多種類のアイコンを画像でなく「Webフォント」として利用できるようにしたものです。フォントとして使えるため、サイズや色などすべて CSS で調整できるのでとても便利です。使い方を覚えて大いに利用しましょう。
使うにあたっては、初歩的なHTMLとCSSの知識を少し必要とします。
Font Awesome を使うには、必要ファイルをダウンロードする方法と、 CDN （コンテンツデリバリーネットワーク）を利用する方法がありますが、ここではCDNを使う方法を紹介します。
１．サイトの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
６．いろいろアイコンを試してみました。
そのまま
青でややおおきく
赤でややおおきく
青でおおきく
赤でおおきく
そのまま
青でややおおきく
赤でややおおきく
青でおおきく
赤でおおきく
ホームアイコン
チェックアイコン
ダウンロードアイコン
注意アイコン
カートアイコン
コメント