Font Awesome

Font Awesome 無料版またはプロ版のアイコンを WordPress サイトで使用するために FontAwesome チームが提供する公式プラグインです。

機能

公式プラグインを使用することで、ページ、投稿、テンプレートに Font Awesome アイコンを簡単に追加できます。次の機能が含まれています:

• 最新リリースまたは特定のリリースの プロ版または無料のアイコン を使用できます。
• プロキットのカスタム アイコン を使用できます。
• Font Awesome キット を使用してアイコン (最新の Duotone スタイルやカスタム アイコンを含む) を追加できます。Font Awesome バージョン 5 のアイコン専用の CDN を選択することもできます。
• 使用中のプラグインがまだバージョン4を使用している場合は、Font Awesome バージョン4との互換性 をオンにします。
• 他のプラグイン / テーマから複数のバージョンの Font Awesome がサイトに読み込まれ、予期しないアイコン表示や技術的な問題が発生する可能性がある場合は、トラブルシューティングして問題を解決します。

使い方

プラグインをインストール、有効化します (詳細は、インストールタブをご覧ください)

アイコンの追加とスタイル設定方法 プラグインの使い方とアイコンの追加方法に関する詳細なドキュメントは、Font Awesome Docs site でご覧いただけます。

ブロックエディターでアイコンを追加 プラグインを設定したら、アイコンをブロックとして、またはテキストにインラインで追加できます。

アイコンをブロックとして追加するには、「Font Awesome Icon」ブロックを選択し、「アイコンを選択」ボタンをクリックしてアイコン選択画面を開きます。

アイコンをインラインで追加するには、フォーマットツールバーで Font Awesome オプションを選択してアイコン選択画面を開きます。(注: インラインアイコンには WP 6.3以上が必要です。)

アイコン選択ツールを開いたら、次の方法でアイコンを追加:

1. 必要なアイコンを検索 – アイコン名、カテゴリ、またはキーワードで検索で検索できます。
2. 別のスタイルのアイコンが必要な場合は、ドロップダウンからファミリーやスタイルを変更します。
3. 必要なアイコンが見つかったら、クリックして固定ページまたは投稿のコンテンツに挿入します。

注: アイコン選択画面でプロ版アイコンを検索して追加したい場合は、プラグインがプロ版キットを使用するように設定してしてください。

クラシックエディターでアイコンを追加 クラシックエディターでアイコンを追加する必要がある場合は、ショートコードや HTML でアイコン名を使用 できます。ショートコードを使用して任意のテキストエリアにアイコンを追加するには、アイコン名とスタイルプレフィックスを追加するだけです。プレフィックスは使用するアイコンのスタイルです。アイコン名に fa- の部分を含める必要はありません。スタイルプレフィックスを追加しない場合、アイコンはデフォルトで Classic Solid スタイルになります。

アイコンのショートコードは次のようになります:

標準の Font Awesome 書式 で基本的な HTML を使用することもできます。このように:

プロ版のアイコンと機能の利用 キットを使ってアイコンを作成するには、FontAwesome.com でキットを作成 し、キット設定タブで「プロ版アイコン」を選択します。次に、Font Awesome アカウントページで API トークンを取得し、WordPress プラグイン設定に追加します。

CDN を使用してアイコンを表示する場合、バージョン5以降のアイコンのみ 使用可能であることにご注意ください。プロ版アイコンを有効化するには、Font Awesome CDN 設定ページ でサイトのドメインを許可ドメインリストに追加し、ショートコードまたは HTML を使用してコンテンツにアイコンを追加してください。

プラグインのトラブルシューティング Font Awesome アイコンは人気があるため、多くのテーマやプラグインも Font Awesome を読み込み、バージョンが競合する場合があります。そこで、競合するバージョンを見つけてアイコンに影響を与えないようにする機能を用意しました: 競合検出スキャナー。

プラグインが正しく設定されているように見えてもアイコンが読み込まれず、理由がわからない場合は、2つあるタブからトラブルシューティングを見てください:

• Font Awesome の他のバージョンのとの競合を検出する-競合検出スキャナーを起動して、サイトに読み込まれている Font Awesome のバージョンを見つけることができます。
• あなたのサイトでアクティブな Font Awesome のバージョン -スキャナーの結果を表示し、 競合するバージョンがサイトに他のバージョンの Font Awesome を読み込むのを防ぐことができます。

スキャナーを使ったトラブルシューティングに関する詳細は、Font Awesome WordPress docs をご覧ください。

構成

プラグインは、デフォルトで Font Awesome の CDN を介して Font Awesome 無料版のアイコンを Web フォントとして提供するように設定されています。プラグインで CDN 設定を直接変更することもできます。基本的な無料版のアイコンだけが必要な場合は、デフォルトの構成に変更を加える必要はおそらくありません。

利用可能なすべての設定とトラブルシューティングに関する詳細は、Font Awesome WordPress docsをご覧ください。

プラグインバージョン4からのアップグレード

• ブロックエディターコンテンツ内やその他の場所にある [icon] ショートコードはこれまで通り動作します。ただし、ブロックエディターのアイコン選択画面で追加した新しいアイコンはインライン SVG として挿入されます。 以前に追加した [icon] ショートコードは、新しいインライン SVG 形式に自動的には変換されません。 [icon] ショートコードを変換したい場合は、ショートコードをいったん削除し、ブロックエディターのアイコン選択画面よりアイコンを再度追加してください。

関連項目

GitHubの README に、WordPress サイトの所有者と開発者向けの詳細があります。

利用可能なすべての設定とトラブルシューティングに関する詳細は、Font Awesome WordPress docsをご覧ください。

また、開発者向けの API ドキュメント があります。