WordPressでFont Awesomeを使う方法を紹介します。
ちなみに、Font AwesomeはWebフォント機能を使って表示するテキスト文字のアイコンです。サイズや色をテキスト感覚でカスタマイズできるのが特徴です。もちろん無料です。
ちなみに、 これ→ 全てフォント（アイコン）です。画像じゃありません。なんか凄い！
Font Awesomeを使う前の注意
2017年12月にFont Awesome Version 5がリリースされました。
- 有料のProバージョンができた（使えるアイコンの数が多い）。
- JavaScriptとSVGによる描画が新たに追加された（推奨されている）。
- faプレフィックスから種類ごとのプレフィックスfas、far、fal、fabに変更された。
これからFont Awesomeを導入される方は特に問題ありません。
問題はVersion 4を利用されていた方がVersion 5にアップデートするケースです。CSS疑似要素のルールとプレフィックス（接頭語）が変更されたので、そのままアップデートすると一部のアイコンが表示されなくなります。最初からテーマにFont Awesomeが設定されている場合は注意して下さい。
準備
Start | Font Awesomeでメールアドレスを入力して、「Send Kit Code」をクリックします。
メールアドレスを入力して「Send Kit Code」をクリック
メールが届くので、「Click to Confirm Your Email Address + Set Things Up」をクリックします。
メールの「Click to Confirm Your Email Address + Set Things Up」をクリック
パスワードを入力して、「Set Password and Continue」をクリックします（メールアドレスとここで設定したパスワードはログインする時に必要になります）。
パスワードを入力して「strongSet Password and Continue」をクリック
名前やFont Awesomeを使い始めた時期を入力できますが、必須ではないので、必要なければ画面下の「No Thanks. Let’s skip this step for now.」をクリックします。
画面下の「No Thanks. Let’s skip this step for now.」をクリック
表示された「キットコード」をコピーします。
表示されたキットコードをコピーする
テーマのヘッダーセクション（header.php）にコピーしたコードを貼り付けます。
テーマのヘッダーにコードを貼り付ける
これでFont Awesomeを使う準備は完了です。
使い方
使い方はBasic Use | Font Awesomeで、アイコン一覧はIcons | Font Awesomeで確認して下さい。
※Version4の方はExamples | Font AwesomeとThe Icons | Font Awesomeで確認して下さい。
基本
アイコン一覧から使いたいアイコンを選択し、表示されたコードをコピーして貼り付けるだけです。
コードをコピーして貼り付ける
|
1 |
<i class="fas fa-camera"></i> |
基本は「iタグ」を使いますが、「spanタグ」や「pタグ」も使えます。
但し、pタグを使用する場合は、pタグのCSSの影響を受けるので注意が必要です。
スタイリング
テキストと同じ様に大きさや色の変更が可能ですが、Font Awesome専用のクラス属性を追加してスタイルを変更するこもできます（回転させたり向きを変えたりできる）。
使い方はBasic Use | Font Awesomeの「Styling」一覧で確認して下さい。
Font Awesomeで使えるクラス属性
最後に
Font Awesomeのアイコンは、画像ではなくフォントですから、テキスト感覚で使えます。
ただ、最初から用意されているスタイル（クラス属性）を利用した際、テーマによってはレイアウトが崩れる可能性もあるので、その際はCSSを修正して下さい。
WEB上ではCDNのコードが多数公開されていますが、バージョンが古いと新しく追加されたフォントが使えない等のデメリットがあるので、個人的にはメールアドレスを登録してキットコードの使用をおすすめします。