Hara Daizo 
WordPressでアイコンを表示する方法は、標準のIconブロック、Social Iconsブロック、テーマ・プラグインのアイコン機能、Font Awesomeなどの外部アイコンライブラリに分けられます。現在は標準ブロックだけで済むケースも多く、最初から外部ライブラリを追加する必要はありません。
この記事では、目的ごとの選び方と設定方法を整理し、Font Awesomeを使う場合の現行導入方法、HTMLでの利用、色・サイズ、読み込み負荷、アクセシビリティまで解説します。
WordPressでアイコンを表示する主な方法
まず「何のためのアイコンか」を決めると、余計なプラグインを増やさずに済みます。
| 方法 | 向いている用途 | 追加導入 |
|---|---|---|
| WordPress標準Iconブロック | 矢印、チェック、連絡先など一般的なアイコン | 不要 |
| Social Iconsブロック | SNSプロフィールへのリンク | 不要 |
| テーマ独自アイコン | ヘッダー、ボタン、装飾等 | テーマによる |
| アイコン系プラグイン | ブロック追加やアイコン一覧から選択 | 必要 |
| Font Awesome | 多数のアイコンをサイト全体で統一利用 | プラグイン・Kit等 |
| SVG・HTML | 独自実装、テーマ開発 | 実装知識が必要 |
「SNSへのリンクを置きたい」ならSocial Icons、「本文にチェックや電話のマークを置きたい」なら標準Iconブロックを先に試します。Font Awesomeは、標準にない図柄やブランドアイコン、大量のアイコンを一貫して使う場合の選択肢です。
WordPress標準のIconブロックを使う
現行WordPressには標準のIconブロックがあります。ブロックエディターやサイトエディターで、画像ファイルを用意せずにベクターアイコンを配置できます。
基本的な流れは次のとおりです。
- 投稿・固定ページ・テンプレートでブロック挿入を開く
- 「Icon」を検索して追加する
- アイコンを選択・置換する
- 必要に応じてサイズ、前景色、背景色を調整する
- 余白や配置を確認する
- PCとスマートフォンで表示を確認する
ベクター形式のアイコンは、一般的なビットマップ画像のように拡大しただけで輪郭がぼやけにくいのが利点です。
一方、アイコンを文章の代わりに使いすぎると意味が分からなくなります。「電話」「メール」「検索」のように一般的な記号でも、重要な操作ではテキストラベルを併用する方が伝わりやすくなります。
SNSはSocial Iconsブロックを使う
Instagram、Facebook、YouTubeなどのプロフィールへのリンクを並べる場合はSocial Iconsブロックが適しています。
- 「Social Icons」ブロックを追加する
- 「＋」からSNSサービスを選ぶ
- 各アイコンにプロフィールURLを設定する
- アイコンの並び、サイズ、色を調整する
- 必要に応じてテキストラベル表示や「新しいタブで開く」を設定する
- 実際に各リンクをクリックして遷移先を確認する
メールアイコンではメールアドレスを設定する使い方もできます。
Social IconsはSNSリンク専用として役割が明確なので、ブランドロゴ画像を一つずつアップロードして並べるより管理しやすい場合があります。SNS側のブランドガイドラインがある場合は、色や改変の可否も確認してください。
Font AwesomeをWordPressで使う方法
Font Awesomeは非常に多くのアイコンを提供するライブラリです。WordPressでは、公式Font AwesomeプラグインとKitを使う方法が現在の分かりやすい入口です。
Font Awesome公式は、WordPress向けの公式プラグインを提供し、Kitの利用を推奨しています。Kitでは使用するアイコンやスタイルを管理でき、Free/Proの条件に応じた提供方法を選べます。
公式プラグインとKitで導入する
一般的な流れは次のようになります。
- WordPress.orgの公式ディレクトリからFont Awesomeプラグインを導入する
- Font AwesomeアカウントでKitを用意する
- プラグイン設定でKitを接続する
- アイコン選択機能またはHTMLで表示する
- 既存テーマや他プラグインが別バージョンを読み込んでいないか確認する
Font Awesome 7を使う場合、古い記事にある「Font Awesome CDNのCSSをそのまま貼る」方法をコピーしないでください。現在の公式ドキュメントでは、v7は従来のFont Awesome CDNでは提供されず、Kitまたはセルフホスト等の現行方式を使います。
HTMLでFont Awesomeアイコンを表示する
Font Awesomeが正しく読み込まれていれば、たとえばWeb Font方式では次のようなHTMLでアイコンを置けます。
<span class="feature-item">
<i class="fa-solid fa-circle-check" aria-hidden="true"></i>
初期設定まで対応
</span>この例では「チェックアイコン」は装飾で、意味自体は「初期設定まで対応」というテキストが伝えているため aria-hidden="true" としています。
アイコン自体に意味を持たせる場合は、見た目だけでなく支援技術へ伝わるラベル設計が必要です。Font AwesomeのSVG+JS方式では装飾アイコンに aria-hidden が自動設定される場合がありますが、手動SVGや独自HTMLでは自分で確認します。
テーマやプラグインのアイコン機能を使う
WordPressテーマによっては、ボタン、見出し、メニュー、リストなどにアイコンを追加できる機能があります。すでにテーマがFont Awesomeや独自SVGを読み込んでいる場合、別のアイコンプラグインを追加すると二重読み込みになることがあります。
導入前に次を確認してください。
- テーマに標準アイコン機能がないか
- すでにFont Awesomeが読み込まれていないか
- アイコンの種類とライセンスが用途に合うか
- プラグイン停止時にアイコンがどうなるか
- HTMLに専用ショートコードや独自クラスが残らないか
「アイコンが選べる」という理由だけでプラグインを増やすより、既存の仕組みで足りるかを先に確認すると保守が楽になります。
アイコンの色・サイズを調整する
標準IconやSocial Iconsブロックでは、ブロック設定から色やサイズを変更できます。テーマ・Font Awesome等でCSS調整が必要な場合は、対象のクラスを確認して変更します。
たとえば独自クラスを付けたアイコンなら、概念的には次のように指定できます。
.contact-icon {
color: #333;
font-size: 1.25rem;
}ただし、テーマやFont Awesomeの方式によって実際の要素・クラスは異なります。!important を足して無理に上書きする前に、開発者ツールでどのCSSが適用されているかを確認してください。
詳しいCSSの追加場所や優先順位はアイコンの色やサイズのCSS調整へ分離します。
読み込み負荷を増やしすぎない
数個のアイコンのために巨大なアイコンセットを複数読み込むと、CSS、Web Font、JavaScriptなどの転送が増える場合があります。
Font Awesomeを使うなら、公式ドキュメントでも必要なスタイル・アイコンだけに絞る「サブセット」が案内されています。また、テーマがv5、別プラグインがv6、Kitがv7というように複数バージョンを同時に読み込むと、容量だけでなく表示競合の原因にもなります。
確認したいのは次の点です。
- 標準Iconブロックで代替できないか
- 使用していないアイコンスタイルまで読み込んでいないか
- Font Awesomeを複数経路から読み込んでいないか
- SVG+JSとWeb Font+CSSのどちらがサイトに合うか
- キャッシュ最適化後にアイコンが消えていないか
最適な方式はアイコン数やサイト構成で変わるため、実際のNetworkパネルで転送ファイルと容量を確認して決めます。
アクセシビリティでは「装飾」か「意味を持つか」を分ける
アイコンは見た目が分かりやすくても、スクリーンリーダー利用者には同じように伝わるとは限りません。
装飾だけのアイコン
「✓ 初期設定まで対応」のように、テキストだけで意味が完結しているなら、アイコンは支援技術から隠して重複読み上げを避けます。
アイコン自体が意味を持つ場合
アイコンだけのボタンやリンクでは、操作の意味をラベルで伝える必要があります。「虫眼鏡だけ」ではなく検索ボタンとして識別できる名前を持たせます。
SNSアイコンも、リンク先のサービス名が分かる状態かを確認してください。色だけで状態を区別するのも避けます。
アイコンと文字を並べるときの注意
アイコンを文章中へ入れると、テーマの line-height やvertical-alignの影響で上下がずれることがあります。また、アイコンと文字を何度も改行で位置合わせすると、スマートフォンで崩れやすくなります。
短いラベルならFlexboxを使うテーマブロックやRowブロックなど、レイアウト用の仕組みを使う方が安定します。文章の改行・段落・行間そのものを調整したい場合は、文字まわりの調整で詳しく確認してください。
アイコンが表示されないときの確認方法
Font Awesomeやテーマ独自アイコンが四角形・空白になった場合は、次の順で確認します。
- WordPress標準Iconブロックなのか外部ライブラリなのか確認する
- Font Awesomeなら使用中のバージョンとアイコン名が一致しているか確認する
- CSS・Web Font・JavaScriptがNetworkで正常に読み込まれているか見る
- テーマや別プラグインから旧バージョンが二重読み込みされていないか確認する
- CSS最適化・遅延読み込みを一時的に切り分ける
- キャッシュを削除して再確認する
古いFont Awesomeでは使えたアイコン名やクラスが、現在のバージョンと一致しないことがあります。過去記事のコードではなく、導入中のバージョンの公式アイコン検索・ドキュメントを基準にしてください。
よくある質問
必須ではありません。現行WordPressには標準のIconブロックとSocial Iconsブロックがあります。必要なアイコンが標準で足りない場合や、サイト全体で統一した大きなアイコンセットを使いたい場合にFont Awesome等を検討します。
おすすめしません。Font Awesomeの提供方法とバージョンは変わっており、v7は従来のFont Awesome CDNでは提供されません。公式WordPressプラグインとKit、または現行ドキュメントに沿ったセルフホストを選び、テーマや他プラグインとの二重読み込みも確認してください。
見た目だけでは意味が伝わらない利用者がいます。装飾アイコンなら支援技術から隠し、操作や意味を伝えるアイコンならラベルや視覚的なテキストを用意してください。SNSリンクでもリンク先が分かるラベルを確認すると安全です。
まとめ
WordPressでアイコンを使う場合は、標準Iconブロック、Social Icons、テーマ機能、Font Awesomeの順に「追加導入が少ない方法」から検討すると整理しやすくなります。
Font Awesomeが必要なら、古いCDNコードを流用せず、公式WordPressプラグインとKitなど現行方式を確認します。さらに、必要なアイコンだけを読み込み、装飾と意味を持つアイコンを分け、アクセシビリティまで含めて実装することが重要です。