Font Awesomeは、Webフォント機能を使って表示するテキスト文字のアイコンです。フォントですから、サイズや色等すべてCSSで調整するこができます。もちろん無料です。
ちなみに、 これ→ 全てフォント（アイコン）です。画像じゃありません。なんか凄い！
そこで今回は、このFont AwesomeをWordPressに導入する方法と使い方を紹介します。
Contents
Font Awesomeを使う前の注意
2017年12月にFont Awesome Version 5がリリースされました。
- 有料のProバージョンができた（使えるアイコンの数が多い）。
- JavaScriptとSVGによる描画が新たに追加された（推奨されている）。
- faプレフィックスから種類ごとのプレフィックスfas、far、fal、fabに変更された。
これからFont Awesomeを導入される方は特に問題ありません。
問題はVersion 4を利用されていた方がVersion 5にアップデートするケースです。プレフィックス（接頭語）が変更されたので、そのままアップデートすると一部のアイコンが表示されなくなります。
参考：Upgrading from Version 4 | Font Awesome
特に、最初からテーマにFont Awesomeが設定されている（使われている）場合は注意して下さい。
準備
CDNを利用する方法です（簡単おすすめ）。ヘッダーに下記のコードを貼り付けます。
|
1 |
<script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js" integrity="sha384-0pzryjIRos8mFBWMzSSZApWtPl/5++eIfzYmTgBBmXYdhvxPc+XcFEk+zJwDgWbP" crossorigin="anonymous"></script> |
この際、コードはGet Started with Font Awesome | Font Awesomeの最新版を使って下さい。上記は「Ver.5.7.2」のコードです。Ver.が古いと新しく追加されたフォント（アイコン）が使えません。
Use Font Awesome Free CDNのコードをコピー
コピーできたら、テーマヘッダー（header.php）の<head>セクション内に貼り付けます。
テーマのヘッダーにコードを貼り付ける
以上で準備は完了です。
CDNとは、Content Delivery Network（コンテンツ・デリバリ・ネットワーク）の略で、世界中に張り巡らされたサーバ（CDN配信プラットフォーム）を通して、コンテンツにアクセスしようとするエンドユーザに最も近いサーバから効率的に配信する仕組みのことです。
ファイルをダウンロードしてサーバーにアップロードする方法もありますが、更新が面倒なのと手順が少し複雑になってしまうので、個人的にはCDNを利用する方法をおすすめします。
使い方
Version 4とVersion 5ではプレフィックス（接頭語）が異なります。
また、使えるクラス属性も異なるので、詳しい使い方は公式サイトで確認して下さい。Version 4はExamples | Font Awesomeで、Version 5はStyling項目 | Font Awesomeで確認できます。
僕はVersion 4.7を利用しています。
基本
アイコン一覧から使いたいアイコンを選択し、表示されたコードをコピーして貼り付けるだけです。
| Version 4 | The Icons | Font Awesome |
|---|---|
| Version 5 | Icons | Font Awesome |
コードをコピーして貼り付ける
基本は「iタグ」を使いますが、「spanタグ」や「pタグ」も使えます。
但し、「pタグ」を使用する場合は、「pタグ」のCSSの影響を受けるので注意が必要です。
|
1 2 3 |
<i class="fa fa-camera-retro"></i> <span class="fa fa-camera-retro"></span> <p class="fa fa-camera-retro"></p> |
色の変更
テキスト同様、「fontタグ」「spanタグ」及び「cssのクラス属性」で変更することができます。
|
1 2 |
<font color="#0000ff"><i class="fa fa-camera-retro"></i></font> <span style="color: #ff0000;"><i class="fa fa-camera-retro"></i></span> |
大きさの変更
大きさを変更するクラス属性が最初から用意されています。
|
1 2 3 4 5 6 |
<i class="fa fa-camera-retro"></i> <i class="fa fa-camera-retro fa-lg"></i> <i class="fa fa-camera-retro fa-2x"></i> <i class="fa fa-camera-retro fa-3x"></i> <i class="fa fa-camera-retro fa-4x"></i> <i class="fa fa-camera-retro fa-5x"></i> |
テキスト同様、「fontタグ」や「spanタグ」で変更することもできます。
|
1 2 |
<font size="5"><i class="fa fa-camera-retro"></i></font> <span style="font-size: 50px"><i class="fa fa-camera-retro"></i></span> |
横幅の統一
アイコンはそれぞれ横幅が異なるため、通常では後ろのテキスト開始位置がずれてしまいます。
fa-home
fa-thumbs-o-up
fa-cc-visa
fa-bluetooth
|
1 2 3 4 |
<i class="fa fa fa-home"></i> fa-home <i class="fa fa-thumbs-o-up"></i> fa-thumbs-o-up <i class="fa fa-cc-visa"></i> fa-cc-visa <i class="fa fa-bluetooth"></i> fa-bluetooth |
そんな時は、クラス属性に「fa-fw」を付けることで横幅が統一されます。
fa-home
fa-thumbs-o-up
fa-cc-visa
fa-bluetooth
|
1 2 3 4 |
<i class="fa fa fa-home fa-fw"></i> fa-home <i class="fa fa-thumbs-o-up fa-fw"></i> fa-thumbs-o-up <i class="fa fa-cc-visa fa-fw"></i> fa-cc-visa <i class="fa fa-bluetooth fa-fw"></i> fa-bluetooth |
ボーダーで囲う
クラス属性に「fa-border」を付けると角の丸いボーダーで囲まれます。
|
1 2 |
<i class="fa fa-twitter"></i> <i class="fa fa-twitter fa-border"></i> |
回り込み
クラス属性に「fa-pull-left」及び「fa-pull-right」を付けると回り込みを指定できます。
pull-leftは左寄せ、pull-rightは右寄せになります。
「fa-quote-left」アイコンに左寄せを指定、「fa-quote-right」に右寄せを指定しています。
|
1 |
<i class="fa fa-quote-left fa-pull-left"></i> 「fa-quote-left」アイコンには左寄せを指定、「fa-quote-right」には右寄せを指定しています。<i class="fa fa-quote-right fa-pull-right"></i> |
回転させる
クラス属性に「fa-spin」及び「fa-pulse」を付けるとアイコンが回転します。
fa-spinは滑らかに回転、fa-pulseは8フレームで回転します。
|
1 2 3 |
<i class="fa fa-spinner"></i> <i class="fa fa-spinner fa-spin"></i> <i class="fa fa-spinner fa-pulse"></i> |
最後に
Font Awesomeのアイコンは、画像ではなくフォントですから、テキスト感覚で使えます。
ただ、最初から用意されているスタイル（クラス属性）を利用した際、テーマによってはレイアウトが崩れる可能性もあるので、その際はCSSを修正して下さい。
Font Awesomeを使うためのプラグインもたくさんありますが、更新が止まっていたり、無駄なタグがついていたり、ショートコードで挿入するタイプが多く、後々変更するのが大変そうな気がしたので、個人的にはCDNファイルを読み込み、「iタグ」で入力した方が楽な気がします。
最近のコメント