Font Awesome（Webアイコンフォント）の使い方をやさしく解説！

ここあです。

ブログのデザインを良くする手段の1つとして

誰でも簡単にできるのが「Webアイコンフォント」を使用する方法です。

「Webアイコンフォント」は

ブログの記事内にワンポイントとしてアイコンを加えるだけで

かなりサイトの印象を変えることができます。

今回は初心者のあなたでも簡単に使うことができる

「Font Awesome（フォントオーサム）」という

非常に便利なサービスがありますので

導入の仕方から使い方までやさしく解説していきます。

また、アイコンフォントはアイコン表示だけでなく

アニメーションを付けることもできるので

訪問者へのアイキャッチとしても効果的です。

Font Awesomeとは？

Font Awesomeとは…

あなたのWebサイトやブログなどで

Webアイコンフォントを表示させられるサービスです。

このサービスは誰でも簡単に無料で利用することができます。

Webアイコンフォントとは？

Webサイト上で文字と同じように表示できるアイコンです。

画像の場合だと、拡大したらぼやけたり

画像を貼り込むことでデータが重たくなったりしますが

Webアイコンフォントを使えば…

などのメリットがあります。

Webアイコンフォント使用例

例えば私のサイトだと…

など…

これらはすべてFont Awesomeの

Webアイコンフォントを使用して表示させています。

Font Awesomeの最新版は？

2017年末、新たにバージョン5

Font Awesome 5がリリースされています。

Font Awesome 5には…

種類が豊富な“PROプラン”も登場。

$60かかりますが、月額使用制ではないので

長く使いたい場合は投資するだけの価値はあります。

個人で使う場合は無料プランで十分。

また、旧バージョンの4.7.0もこれまで通り使えますので

お好みに合わせて使い分けることが可能です。

Font Awesomeの使用準備

Font Awesomeを使うためには下準備が必要です。

使うための方法として…

の2通りがあります。

今回は、私がおすすめする

CDNを使って表示させる方法だけに絞り設定の仕方を説明していきます。

私がCDNを使すすめる理由は…

だからです。

Font Awesomeの使用手順（1）コードをコピーする

Font Awesome をCDNで読み込むための以下のコードをコピーします。

旧バージョンを使う場合は、こちらのコードをコピーしてください。

Font Awesomeの使用手順（2）コードをテーマヘッダーに貼り付ける

上記、コピーしたコードを子テーマの

テーマヘッダー（header.php）にコピーします。

テーマヘッダーへは

ダッシュボードメニューから外観 → テーマの編集をクリックし

テーマファイルの中のテーマヘッダーを選択します。

テーマヘッダーを開いたら

〈head〉〜〈/head〉の間にコードをコピーして設定を保存します。

これでFont Awesomeを使うための下準備は完了です。

子テーマのテーマヘッダーが見つからないという場合は…

テーマヘッダーを表示させる方法を

こちらの記事に記載していますので参考にしてください。

「親テーマ」のファイルを「子テーマ」で編集する方法

Font Awesomeの基本的な使い方

コードがコピーできて、下準備が完了すれば

Webアイコンフォントを表示させるのは非常に簡単。

順番に基本的な使い方を解説していきますね。

STEP1：使いたいアイコンフォントをサイトから探す

まずはFont Awesomeの公式サイトにアクセスして

あなたが使いたいWebアイコンフォントを探します。

頻繁に使いたい場合は、ブックマークしておくと便利ですね＾＾

「Font Awesome 5」公式サイト

「旧バージョン4.7.0」公式サイト

今回は、Font Awesome 5の方で説明致します。

公式サイトに移動したら…

トップページにIconsという表示があるのでクリックします。

Iconsをクリックするとアイコン一覧が表示されます。

しかし、表示されているアイコンは

PROプランのアイコンも全て含まれています。

左にあるFreeの文字をクリックして

無料で使えるアイコンのみを表示させます。

Freeで使えるアイコン一覧が表示できたら

一覧表示の中から使いたいアイコンを選びます。

今回はサンプルとして以下のアイコンを選びました。

STEP2：Webアイコンフォントのコードをコピーする

使いたいアイコンを選んだら使いたいアイコンをクリックして

アイコンコードの画面を表示させます。

この画面で、左下に表示されているコード

<i class=”fab fa-angellist”></i>の部分をコピーします。

STEP3：アイコンを表示させたい位置に貼り付ける

先ほどコピーした

<i class=”fab fa-angellist”></i>のWebアイコンフォントを

あなたが挿入したい場所にペーストして貼り付けます。

STEP4：アイコンの大きさを変えたい時は…

Font AwesomeのWebアイコンは大きさを変えるのも簡単です。

CSSで“class”指定すると

自由自在にアイコンサイズの変更ができるようになります。

例えば、あなたの好きな名前（今回はbigx2）を

class名に追加してCSSでサイズ指定をします。

※emとは1文字分という単位のことなので2emなら2倍、3emなら3倍とサイズ指定も分かりやすいです。

STEP5：アイコンの色を変えたい時は…

色を変える時も、先ほどのサイズ指定同様

CSSで指定すると簡単にできます。

例えば、あなたの好きな名前（今回はmy-orange）を

class名に追加してCSSでサイズ指定をします。

アイコンがオレンジ色に変わりました＾＾

STEP6：アイコンと文字の間を空けたい時は…

Webフォントアイコンと文字の間を空けたい時は

単純にコードを入力する際にスペースを入れれば空けることができます。

さらにもっとこだわりたい場合はCSSで指定をします。

例えば、あなたの好きな名前（今回はmy-space）を

class名に追加してCSSでスペースの距離を調整します。

※半角スペースを空けたい時は0.5em、全角スペース（1文字分）空けたい時は1emなど、お好みで調整してみてください。

Font Awesomeの応用を効かした使い方

Font Awesomeの使い方が分かると

いろいろと応用させることができます。

Font AwesomeをCSSの疑似要素と組み合わせて使う方法

Font AwesomeのWebアイコンフォントを

CSSの疑似要素と組み合わせると、こんなこともできます。

やり方はそれほど難しくはありません。

以下の方法で表示させることができます。

簡単に解説すると…

“apple”というCSSのclass名を作り

appleの文字の前にFont Awesomeのアイコンを表示させてねというやり方。

※：before 要素の直前に内容を入れるコード（CSSの疑似要素）

さらに、font-family: "Font Awesome 5 Brands";で

アイコンフォントを使うことを明記し

content: '\f179';でアイコンの種類を指定します。

今回はappleのマーク

赤枠のコード\f179をコピーして使用しています。

※\（バックスラッシュ）を忘れないよう記述してください。

Font Awesomeの種類

Font Awesomeの種類は大きく分けて4つに分類されます。

fabで始まるブランド系アイコンはfont-mamilyを変える

上記、apple社のアイコンなど

ブランド系のWebフォントアイコンを使う場合は

font-familyの指定をfont-family: "Font Awesome 5 Brands";

としてください。

ブランド系アイコンの見分け方は、上記表を見ても分かる通り

接頭辞が fab となっているWebフォントアイコンです。

例えば、上記appleマークの場合だと…

コードが<i class=”fab fa-apple”></i>と

コードの接頭辞にfabが付いています。

ここで、このWebアイコンフォントは

ブランド系と判別することができます。

見出しにFont Awesomeを使う

見出しにWebアイコンフォントを使う時は

以下の書き方を応用してください。

※見出しにWebアイコンフォントを使用する場合は、hタグの前に必ずentry-contentを付けてください。entry-contentを付けないと…記事以外の全てのhタグに反映されてしまいます。

なお、その他、見出しのデザイン例はこちらの記事にまとめています。

【コピペだけ！】STORK（ストーク）の見出しをオシャレにカスタマイズ！

リスト表示にWebアイコンフォントを使う

Webアイコンフォントはリスト表示にも使えます。

実際に私も使用しています。

詳しいやり方は、以下の記事で紹介しています。

Webアイコンフォントをリスト表示で使う方法

Font Awesomeにアニメーションを付ける方法

Font AwesomeのWebアイコンフォントは

様々なアニメーションを付けることもできます。

例えば、私が使っているこのアイコンも

アニメーション機能を使って表示させています。

←webアイコン + アニメーション表示

Font Awesome Animationの使い方

Font Awesome Animationを使うには

Font Awesome同様、CDNとして読み込むための

以下のコードをテーマヘッダー（header.php）にコピーします。

アニメーションの動きの付け方

アニメーションを付ける場合は

以下のようにコードを書いてください。

例えば、上記例の場合は…

fab fa-appleというのでapple社のアイコンのマークを表示させます。

ここに、アニメーションのclass名

faa-bounce animatedというのを足してみます。

そうすると…

かわいい動きが付きましたね。これなら訪問者の目を引いてくれそうです＾＾

先に紹介したやり方を組み合わせると、色や大きさも変えられるし

アニメーションの動きを変えることもできます。

アニメーションの動きは

Font Awesome Animation公式サイトからコピーして

いろいろと試してみてくださいね。

Font Awesome Animation公式サイトの

主に一番左側の列で、動きのあるアニメーションを

表示させることができます。

アイコンにマウスを合わせた時（hover時）に動かす方法

Font Awesome Animationは常時動かすだけでなく

アイコンの上にマウスを合わせた時に

アイコンが動くようにも設定できます。

やり方はとても簡単！

先ほど書いたコードのanimatedをanimated-hoverに変えるだけ。

例えば、上記例の…

animatedの部分をanimated-hoverに変更してみます。

そうすると…

リンゴアイコンの上に

マウスを持ってきた時だけ動くようになりました＾＾

アイコンhover時のアニメーションはどの動きでも可能です。

公式サイトを見ると分かりますが、

全てのコードにおいて違いはanimatedか、animated-hoverかだけです。

一番右にある親要素へのHover時のみアイコンを動かす方向

もありますが、ここでは説明は省かせていただきます。

なかなかそこまで機能を使う人は少ないと思います＾＾；

Font Awesome 5を使う時の注意点

Font Awesome 5を使用する際CSSで指定しても

「あれ？表示されない」という時があるかもしれません。

CDNでFont Awesome 5を読み込む場合

CSSの指定の仕方が旧バージョンと若干変わっています。

CSSでFont Awesome 5を読み込む場合は

上記のように

font familyの指定は"Font Awesome 5 Free"; で。

また、先ほどの例に挙げたブランド系アイコンの場合は

font familyの指定を"Font Awesome 5 Brands"; としましょう。

さらに、一部アイコンにはfont-weight: bold;と指定しないと

表示されないものもあるようです。ややこしいですね＾＾；

万が一表示されない場合は試してみてください。

Font Awesome（Webアイコンフォント）の使い方まとめ

今回はFont Awesomeの導入の仕方から

使い方まで簡単に解説してきました。

Webアイコンフォントは記事の本文だけでなく

見出しやリスト、目次のワンポイントなど様々な場所で使えます。

Webアイコンフォントを導入すれば

ブログの印象も変えることができるし

手軽に導入できるのでぜひ試してみてくださいね＾＾

最後までお読みいただきありがとうございました！