WordPressにFont Awesomeを導入する方法と使い方

最終更新日 2023年5月10日

WordPressでFont Awesomeを使う方法をまとめておきます。

準備

いずれかの方法でFont Awesomeを使う準備を完了させて下さい。

個人的には、ブロックエディターにも対応している公式プラグインが一番おすすめです。他の方法は、記事編集画面でアイコンを挿入する際に手間がかかります（CSSに組み込む程度なら問題ない）。

また、SWELLの様に最初からFont Awesomeのコードが組み込まれているテーマでは設定不要です。

Font Awesomeを追加＆有効化して、管理画面の設定「Font Awesome」から各種設定を行います。

スクロールできます

設定	詳細
How are you using Font Awesome? （ファイルを読み込む方法）	登録なしで使える「Use CDN」を選択
Icons （有料版or無料版）	無料の「Free」を選択
Technology （フレームワーク）	「Web Font」を選択
Version （バージョン）	「最新版（Latest）」を選択
Version 4 Compatibility （バージョン4との互換性）	onにするとバージョン4のアイコンも表示できる

スタイリングを追加して上手く表示されない時は、Technologyで「SVG」を選択して下さい。

プラグインを追加する方法は、通常の使い方以外にもショートコードで挿入できるのがメリットです。

Start | Font Awesomeでメールアドレスを入力して、専用のキットコードを入手します。

特に躓くところはないので、手順通り進んで登録を完了させて下さい。

後は、あなた専用のキットコードをテーマヘッダーheader.phpに貼り付けるだけです。

下記のCDNコードをテーマヘッダー（header.php）の<head>～</head>の間に貼り付けます。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.4.0/css/all.css">

CDNコードを使う方法は、最新バージョンが公開された際にコードを更新する手間がかかります。更新は必須ではありませんが、新しく追加されたフォントアイコンが使えません。また、Font Awesome 4から移行する場合も、一部のアイコンが表示されなくなる可能性があるので注意して下さい。

有料版のProもCDNコードでは利用できません。

基本はHTMLタグをコピーして「iタグ」を挿入しますが、プラグインはショートコードも使えます。

アイコン検索から、使いたいアイコンを検索します（無料版の方は「Free」にチェックを入れる）。

使いたいアイコンを選択して、表示されたiタグをコピーします。

<i class="fa-brands fa-wordpress"></i>

表示させたい場所にコードを貼り付けるとアイコンが表示されますが、ブロックエディターでは空のiタグをそのまま貼り付けることができません。一度ブロックを「HTMLとして編集」に切り替える必要があります。

編集後はビジュアルモードに戻しても構いませんが、少し使い勝手が悪い気がします。

公式プラグインを追加すると、エディターに専用ボタンが追加されます。

アイコンを表示させたい場所で、ツールバーオプションの「Font Awesome icon」をクリックします。

アイコン一覧が表示されるので、使いたいアイコンを検索して選択します。

記事内にFont Awesomeのショートコードが挿入されます（ブログ上ではアイコンとして表示されます）。

わざわざHTML編集に切り替える必要がないですし、編集画面からアイコンを検索できるので、作業効率が格段に上がります。記事内でFont Awesomeを多用する場合は、プラグインの導入推奨です。

スタイリングを変更したい時は、iタグ及びショートコードにクラス属性を追加します。

スクロールできます