Font Awesome

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

機能

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

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

使い方

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

How to Add and Style Icons Full docs on how to use the plugin and add icons are available on the Font Awesome Docs site.

Add Icons in the Block Editor Once you’ve set up your plugin, you can add icons as blocks or inline with text.

To add icons as blocks, select the “Font Awesome Icon” block, and then click the “Choose Icon button” to open the Icon Chooser.

To add icons inline, select the Font Awesome option in the format toolbar to open the Icon Chooser. (Note: Inline icons require at least WP 6.3.)

Once you open the Icon Chooser, add icons by:

1. Searching for the icon you want – you can search by icon name, category, or keyword.
2. Changing the Family and Style using the drop downs if you want an icon in a different style.
3. When you see the icon you want, clicking it to enter it into the content of your page or post.

Note: If you want to search and add Pro icons in the Icon Chooser, make sure you set your plugin to use a Pro Kit.

Add Icons in The Classic Editor If you need to add icons in the classic editor, you can use the icon names in shortcodes or HTML. Add an icon using shortcodes to any text area – just add the name of the icon and a style prefix, where the prefix is the style of icon you want to use. Note that you don’t need to include the fa- part of the icon name. And if you don’t include any style prefix, the icon will default to the Classic Solid style.

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

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

Using Pro Icons and Features To use a Kit to power your icons, create a Kit on FontAwesome.com and select “Pro icons” in the Kit Settings tab. Then grab your API Token from your Font Awesome Account page and add it to your WordPress plugin settings.

To use the CDN to power your icons, know that you will only be able to use icons from Version 5. To enable Pro icons, add your site’s domain to the list allowed domains on your Font Awesome CDN Settings page and then use shortcodes or HTML to add the icons into your content.

プラグインのトラブルシューティング 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をご覧ください。

Upgrading from Plugin Version 4

• [icon] shortcodes found in Block Editor content and elsewehre will continue to work as before, though new icons added with the Icon Chooser in the Block Editor will be inline SVGs. Previously added [icon] shortcodes will not be automatically be converted into the new inline SVG format. If you want to convert an [icon] shortcode, delete it and re-add the icon using the Icon Chooser in the Block Editor.

関連項目

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

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

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