要約：WordPressにFont Awesomeを追加する方法
3つの方法があり、どちらの方法が適切かは、投稿内にアイコンが必要か、サイトのデザイン内にアイコンが必要かによって異なります。
- 公式プラグイン：無料。エディターにFont Awesome Iconブロックを追加します。投稿や固定ページ内のアイコンに最も簡単な方法です。
- ショートコード：
[icon name="rocket"]は引き続き機能し、プラグイン独自のドキュメントがクラシックエディターユーザーに推奨している方法です。 - SeedProd：ヘッダー、フッター、メニュー、ランディングページ用に2,420個のアイコンが組み込まれており、コードは不要です。
- 手動コード：スタイルシートを自分で読み込みますが、テーマファイルに慣れている場合のみです。
- 知っておくと良いこと：SeedProdのアイコンブロックとアイコンボックスブロックはすべての有料プランに含まれているため、これらを使用するためにProティアは必要ありません。
ソーシャルアイコンをPNGとしてアップロードすると、ラップトップではきれいに表示されます。しかし、サイトをスマートフォンで開くと、端がぼやけてしまいます。ブランドカラーを半年後に変更すると、画像エディターに戻ってセット全体を再エクスポートする必要があります。
Font Awesomeは両方の問題を解決します。なぜなら、そのアイコンはベクターシェイプであり、グラフィックアプリではなくカラーピッカーで再スタイル設定できるからです。
WordPressに組み込む方法は3つあります。このページでは長い間間違った順序で並べていました。公式の無料プラグインはほとんどの人にとって最も簡単な方法なので、そこから始めます。
WordPressにFont Awesomeを追加する方法：
- Font Awesomeとは何か、そしてなぜそれを使用するのか？
- 1. 公式プラグインでFont Awesomeを追加する
- 2. SeedProdですべてのデザインにFont Awesomeを追加する
- 3. コードで手動でFont Awesomeを追加する
- どの方法を使用すべきか？
- WordPressにFont Awesomeを追加することに関するFAQ
Font Awesomeとは何か、そしてなぜそれを使用するのか？
Font Awesomeはアイコンライブラリなので、矢印、電話のシンボル、ソーシャルロゴごとに画像をアップロードする代わりに、リストから1つを選んでページにドロップします。
アイコンは画像ではなくベクターなので、どんなサイズでもシャープに表示され、テキストと同じようにスタイルを変更できます。
また、PNGよりもはるかに軽量なので、WordPressサイトを高速化するのに役立ちます。
取得できるアイコンの数は、どの方法を選択するかによって異なります。また、数はあいまいな表現で引用されることが多いので、実際に確認できるものを挙げます。SeedProd 6.20.9を自分のテストサイトで開き、付属のアイコンライブラリを数えました。Font Awesome Free 6.6.0から2,420個のアイコンがあります。
また、最新のブラウザやデバイスで一貫して表示され、画像ファイルを一切変更せずに色、サイズ、配置を変更できます。最後の点は本当に画期的です。なぜなら、色の調整にかかる時間が10秒で済むか、午後いっぱいかかるかの違いだからです。
次に、サイトに導入しましょう。
1. 公式プラグインでFont Awesomeを追加する（最も簡単）
投稿やページ内にアイコンだけが必要な場合は、ここから始めてください。公式Font Awesomeプラグインは無料で、Font Awesomeチームによって開発されており、スタイルシートを自分で管理する必要がなくなります。
アイコンプラグインをインストールする前に、それがまだメンテナンスされているか確認することをお勧めします。なぜなら、多くのプラグインが放棄されているからです。WordPress.orgのリストを確認したところ、バージョンは5.2.1で、2026年8月に更新され、WordPress 7.1でテスト済みでした。これはプラグインリストとしては最新に近いものです。
他のプラグインと同じように**プラグイン › 新規追加**からインストールし、有効化してください。まだ行ったことがない場合は、WordPressプラグインのインストール初心者ガイドで手順を説明しています。
Font Awesomeブロックでアイコンを追加する
プラグインが有効になったら、任意の投稿またはページを開き、**Font Awesome Icon**ブロックを追加します。
**アイコンを選択**をクリックすると、アイコン選択画面が開きます。
そこから、アイコン名、カテゴリ、またはキーワードで検索でき、ドロップダウンでファミリーとスタイルを切り替えることで、同じ形状のより軽量またはより重いバージョンを選択できます。目的のアイコンをクリックすると、コンテンツに挿入されます。
文の途中にアイコンを配置したい場合は、テキストをハイライトして、代わりにフォーマットツールバーから**Font Awesome**を選択してください。これにより、同じアイコン選択画面が開きます。これにはWordPress 6.3以降が必要です。
ショートコードでFont Awesomeアイコンを追加する
このページでは、以前はショートコードブロックに貼り付けてショートコードを主な方法として教えていました。ブロックエディターを使用しているユーザーにとっては間違ったアドバイスでした。上記のブロックが代わりに必要なものです。
ショートコードは引き続き機能し、プラグイン自体のドキュメントでクラシックエディターを使用している場合に参照されるものです。必要なアイコンの名前を追加してください。
[icon name="rocket"]「ロケット」を必要なものに置き換え、名前の接頭辞「fa-」は省略してください。スタイルを指定しない場合、アイコンのクラシックソリッドバージョンが表示されます。
特定のウェイトを要求するには、接頭辞を追加します。
[icon name="rocket" prefix="fa-sharp fa-light"]アイコンの名前を見つけるには、fontawesome.com/icons のギャラリーを参照し、必要なものをクリックしてください。
名前をコピーし、ショートコードに貼り付けて公開してください。
プラグインが使用しているソースを確認してください：CDNオプションはバージョン5のアイコンのみを提供するため、新しいセットが必要な場合は、代わりにFont Awesome Kitをプラグインに指定する必要があります。
この方法には1つの実際の制限があります。アイコンをコンテンツに配置しますが、サイトヘッダー、メニュー、または自分でデザインしたランディングページに配置したい場合は問題になります。そのためには、投稿ではなくデザインを編集する何かが必要です。
2. SeedProdですべてのデザインにFont Awesomeを追加する
SeedProdはWordPressのドラッグアンドドロップウェブサイトビルダーなので、テーマファイルを編集する代わりに、ビジュアルでページやテンプレートをデザインします。私は自分のサイトでそれを使用して構築しており、アイコンはその中でも本当に素早く作成できるものの1つです。
ここで使用する理由は配置です。デザインを編集しているため、Font Awesomeアイコンをヘッダー、フッター、サイドバー、またはランディングページに配置でき、HTMLやCSSクラスは必要ありません。
追加方法は次のとおりです。
ステップ1. SeedProdのインストールと有効化
サイトにSeedProdをインストールして有効化します。無料バージョンがあり、私が以下で使用するアイコンブロックとアイコンボックスブロックはすべての有料プランで利用できるため、基本的なプランでも開始できます。
有効化後、ライセンス画面に移動します。ライセンスキーを貼り付けて、ライセンスキーを検証をクリックします。いつでも SeedProd › 設定 › ライセンスキー からアクセスできます。
キーは、ダウンロードセクションのSeedProdウェブサイトのアカウントにあります。
ステップ2.ページの名前を付け、テンプレートを選択します
SeedProd › ランディングページ に移動し、新しいランディングページを追加をクリックします。
まずページに名前を付けます。入力すると、SeedProdは名前からURLを生成しますが、これは後でページ設定で変更できます。
次に、次へ：テンプレートを選択をクリックし、開始するデザインを選択します。
どのテンプレートでも最初から最後までカスタマイズできるため、悩むよりも、最も近いものを選んでください。自分で最初から始めたい場合は、空白オプションがあります。
次に、SeedProdがページをビジュアルエディターで開きます。
ページだけでなく、テーマにアイコンを入れたいですか？ 同じビルダーでカスタムWordPressテーマを作成することもできます。これは、すべてのページで共有されるヘッダーまたはフッターにアイコンを配置する場所です。
ステップ3. Font Awesomeアイコンを追加する
エディターは、右側にページのライブプレビューが表示され、左側にブロックと設定が表示されます。
ページ上の既存のブロックをクリックすると、その設定が左側のサイドバーに表示され、コンテンツ、色、背景、フォントを変更できます。
アイコンを追加するには、[デザイン]の下にある[アイコン]ブロックを見つけて、レイアウトにドラッグします。
デフォルトでは矢印でドロップされます。ブロックが選択された状態で、設定パネルの[アイコンライブラリ]ボタンをクリックしてスワップします。
これにより、2,420個すべてのアイコンが含まれるピッカーが開きます。スクロールするか、検索ボックスに探しているものを入力します。アイコンの名前がおおよそわかっている場合は、こちらの方が速いです。
クリックするとレイアウトに配置されます。その後、色、サイズ、配置、リンクを設定できます。
アイコンにヘッダーとテキスト行を一緒に含めたい場合は、代わりに[アイコンボックス]ブロックを使用してください。これは extra copy の余地があり、同じように動作します。単独のアイコンだけでは十分でない機能セクションでは、こちらを使用します。
同じアイコンセットを使用する他の2つのブロックがあり、これらは手動でアイコンを配置する手間を省くため、知っておくと便利です。
[ソーシャルプロファイル]ブロックは、[カスタムソーシャルメディアアイコン]をセットとして処理するため、ネットワークごとに1つのアイコンをドラッグする必要はありません。
ストアを運営している場合は、[メニューカート]ブロックが[ショッピングカートアイコンをメニューに]配置します。
ステップ4.変更を公開する
[保存]をクリックし、次に[公開]をクリックしてページを公開します。
ページにアクセスし、次に進む前に、いくつかの画面サイズでアイコンを確認してください。
3. コードで手動でFont Awesomeを追加する
Font Awesome を自分で読み込んで、プラグインを完全にスキップすることもできます。これは、テーマファイルを編集することに慣れている場合にのみ行うことをお勧めします。なぜなら、ここでタイプミスをすると、アイコンが壊れるだけでなく、サイト全体がダウンする可能性があるからです。
以下のスニペットは、CDN からスタイルシートを読み込みます。これは子テーマの functions.php に配置する必要があり、親テーマには絶対に配置しないでください。そうしないと、次のテーマの更新で削除されてしまいます。
function my_theme_font_awesome() {
wp_enqueue_style(
'font-awesome',
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css',
array(),
'6.6.0'
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_font_awesome' );それが完了したら、HTMLを追加できる場所ならどこでもHTMLとしてアイコンを記述します。
<i class="fa-solid fa-rocket"></i>正直なところ、もう functions.php を編集することはありません。このようなスニペットは [WPCode] に保存しています。これにより、テーマを切り替えてもコードが保持され、ファイルエディタを開かずに無効にすることができます。
テーマファイルを触る前に必ずバックアップしてください：保存後にダッシュボードにアクセスできなくなった場合は、FTPまたはホストのファイルマネージャーを使用して元に戻す必要があります。
どの方法を使用すべきか？
これら3つの違いを分ける実際の質問は、設定のしやすさではなく、アイコンを表示したい場所です。
| 方法 | アイコンを配置できる場所 | コードが必要？ | 費用 |
|---|---|---|---|
| 公式 Font Awesome プラグイン | 投稿やページ内、文中でも | いいえ | 無料 |
| SeedProd | デザイン内のどこでも：ヘッダー、フッター、メニュー、ランディングページ | いいえ | 有料プランのアイコンとアイコンボックス |
| 手動コード | HTMLを記述できる場所ならどこでも | はい | 無料 |
投稿を書くほとんどの人にとって、公式プラグインが正しい選択肢であり、そこで止めるべきです。無料であり、アイコンを作成した人々によってメンテナンスされており、アイコンチョーサーはクラス名を検索するよりも高速です。
コンテンツ外のすべてで問題が発生します。アイコンをヘッダー、フッター、メニュー、または自分でレイアウトしたページに配置する必要がある場合は、SeedProd を使用します。なぜなら、その時点では投稿ではなくデザインを編集しているからです。
手動でのルート設定は、特定のFont Awesomeバージョンを固定したい場合や、プラグインを追加したくない場合にのみ価値があります。それ以外の場合は、実質的なメリットなしにメンテナンス作業を引き受けることになります。
WordPressにFont Awesomeを追加することに関するFAQ
Font AwesomeはWordPressサイトで無料で使用できますか？
はい、無料セットでほとんどのサイトをカバーできます。公式プラグインとSeedProdの両方が標準で提供するものです。Font Awesomeは、より大きなアイコンライブラリと追加スタイル用のProサブスクリプションを販売していますが、ページにアイコンを配置するためにそれが必要になることはありません。
Font Awesomeアイコンが空の四角で表示されるのはなぜですか？
通常、スタイルシートが読み込まれていないか、2つの異なるバージョンのFont Awesomeが読み込まれて互いに競合しています。これは、テーマが1つを含み、プラグインが別のものを含んでいる場合に発生します。公式プラグインには、他のコピーを見つけるための競合スキャナーが組み込まれています。
Font Awesomeは私のサイトを遅くしますか？
スタイルシートのリクエストが1つ追加されるため、正直な答えは少しですが、置き換える画像ファイルよりもはるかに少なくなります。サイトを遅くする可能性のあるバージョンは、ライブラリ全体を2回読み込むことであり、これは上記と同じ競合問題です。
WordPressメニューにFont Awesomeアイコンを配置できますか？
標準の「外観」と「メニュー」画面ではできません。これらはプレーンテキストのみを受け付けます。アイコンをサポートするツール（SeedProdのヘッダーテンプレートなど）でメニューを構築するか、Font Awesomeが読み込まれた後に手動でアイコンマークアップを追加する必要があります。
アイコンのサイズと色を変更するにはどうすればよいですか？
SeedProdでは、スライダーとカラーピッカーを使用してブロックの設定パネルで両方を設定します。HTMLでは、テキストのようにスタイルを設定するか、fa-2xのようなFont Awesome独自のサイズ指定クラスを使用します。
アイコンブロックにSeedProd Proが必要ですか？
いいえ。SeedProdのドキュメントでは、アイコンブロックとアイコンボックスブロックの両方がすべてのライセンスプランで利用可能であると記載されており、Basicプランにも含まれています。このページには以前、アイコンボックスにはProが必要だと記載されていましたが、それは間違いでした。
WordPressサイトにアイコンを追加する準備はできましたか？
アイコンを配置する必要がある場所に基づいて選択してください。投稿やページの場合は、公式プラグインを使用すれば約2分で完了します。
ヘッダー、フッター、またはデザインしたページの場合は、SeedProdのアイコンブロックとアイコンボックスブロックを使用します。これらは最上位プランだけでなく、すべての有料プランに含まれています。
いずれにしても、後で色を変更するのは、再エクスポートではなくクリック1回で済みます。これが、私が画像ファイルをこの目的で使用するのをやめた理由です。
次に、ナビゲーションを整理するためにWordPressでメニューを編集するか、まだデザインを選択していない場合は最適なWordPressテーマを確認することをお勧めします。
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
