Font Awesomeを利用する方法

WordPressでFont Awesomeを利用する方法です。
テーマをカスタマイズして内包する形で導入します。

◆ 安全にfunctions.phpをカスタマイズする方法
functions.phpの修正に不安がある人は以下を参考にしてください。

Font Awesomeとは？

アイコンフォントをまとめたツールセットです。
https://fontawesome.com

アイコンフォントとは、その名の通りフォントで構成されたアイコンです。
1つ1つのアイコンに対して画像を用意しなくても、コード指定でアイコンを表示できます。

無料版と有料版が存在し、基本的には利用可能なアイコン数が異なります。
公式の検索結果だと無料版が約2000個、有料版が約60000個らしいです。

また、CDN形式で利用する場合は無料版と有料版ともにPV制限があります。
これはダウンロード版を利用することで無制限になるので、基本的にダウンロード版を利用します。

関連ファイルを入手する

次のリンクからダウンロード版を入手します。
アカウント登録を要求されたら適当に登録してください。
https://fontawesome.com/download

現在(20250915)の最新版はVersion 7.0.1です。これのFont Awesome Freeを探します。
そしたら、Download Free for Webを選んでWeb版をダウンロードします。

関連ファイルを配置する

圧縮ファイルを解凍すると色々ありますが、必要なのは以下のみです。
これをディレクトリごと、テーマ配下の好きな場所にコピーします。

1. webfonts
2. css

Tips厳密にはもっと削減できますが、誤差なのでディレクトリごと利用するのがオススメです。

コードを追加する

functions.phpとかに以下のコードを追加します。

// Font Awesome
wp_enqueue_style('fonts.fontawesome', get_template_directory_uri() . '/fonts/fontawesome/css/all.min.css', array(), '7.0.1', 'all');

アイコンを表示する方法

最初に表示したいアイコンを公式で探します。
https://fontawesome.com/search?ic=free&o=r

検索機能ですが、見ての通り日本語は対応してないので英語で検索します。
とりあえず、このサイトでも利用してるコピーアイコンを使うことにします。

次に目的のアイコンを選ぶと、こんな画面になります。

ここで色々とアイコンに対して設定(大きさ、色、アニメーション等)できます。
ただし、左上にPROと表示されるアイコンは有料版を意味するので、無料版では利用できません。

設定を終えたら画像の枠で指定したHTMLをコピーします。後は、それを表示したい位置に書くだけです。
他にもCSSからコード指定もできるので、そっちのほうがいい人は右上に表示されてるコードを使います。

<i class="fa-solid fa-copy"></i>

あとがき

このサイトのちっこいアイコンは殆どがFont Awesomeです。
よほど強いこだわりがなければ無料版でも十分って感じですね。