Font Awesome
FontAwesome チームが提供する Font Awesome 無料版またはPro版のアイコンをサイトで使用する公式の方法。
機能
私たちの公式プラグインを使用すると、Font Awesome を自由に使うことができます:
- Pro版または無料版のアイコンを使用します。
- アイコンの最新リリースまたは特定のバージョンを活用します。
- SVG または Web フォントのいずれかの表示方法を選択します。
- 従来の Font Awesome CDN よりアイコンを読み込むか、Font Awesome キットを使用してください。Web 上で Font Awesome アイコンを使用する最も簡単で効率的な方法です。
- あなた (またはプラグイン) がまだバージョン4 を使用している場合は、Font Awesome バージョン4の自動互換性をオンにします。
- Font Awesome の複数のバージョンが他のプラグイン/テーマからサイトにロードされている場合の問題をトラブルシューティングして解決します。これにより、予期しないアイコンの表示や技術的な問題が発生する可能性があります。
- Font Awesome バージョン6のアイコンを使用し、機能をさらに素晴らしいものにします。
- プロキットからアップロードしたアイコンを使用します。
使い方
プラグインをインストール、有効化します (詳細は、インストールタブを参照してください)
ページや投稿にアイコンを追加 アイコンの追加は、ブロックエディターとクラシックエディターの両方で使えます。
プラグインを設定したら、テキストブロックのツールバーより Font Awesome Icon のメニューをクリックしアイコンチューザーを開くことで、ページや投稿にアイコンを検索しながら追加できます。(アイコンチューザーでプロ版のアイコンを検索して追加する場合は、プロ版キットを使用する必要があります。)
または、ショートコードまたはHTMLでアイコン名を記述することもできます。ショートコードを使用する場合は、アイコンの名前とプレフィックスを追加します。ここで、プレフィックスは使用するアイコンのスタイルです。fa-
の部分を含める必要はないことに注意してください。また、プレフィックスを含めない場合、アイコンはデフォルトでソリッドスタイルになります。
アイコンのショートコードは次のようになります:
[icon name="stroopwafel"]
[icon name="stroopwafel" prefix="fal"]
Font Awesome WordPress docs より、すべてのショートコードオプションの詳細を入手してください。
標準の Font Awesome 書式 で基本的な HTML を使用することもできます。このように:
<i class="fas fa-stroopwafel"></i>
プロ版のアイコンと機能の使用 キットを使用するには、Kit on FontAwesome.com を作成し、設定で “Pro icons” を選択します。 次に、Font Awesome アカウントページより API トークンを取得し WordPress のキットの設定に追加します。
CDNでProアイコンを追加するには、Font Awesome アカウントのCDN設定ページの許可されたドメインのリストにドメインを追加する必要があります。そして、ショートコードまたは HTML を使用して、コンテンツにアイコンを追加します。
Icon Chooser を使用している場合は、プロキットを使用する必要があります。(CDN は無料版アイコンの検索と追加のみが可能です。CDN を使用する場合は、ショートコードまたはHTMLを使用して Pro版アイコンを追加してください)。
プラグインのトラブルシューティング 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 を参照してください。
古いバージョンからアップグレード
古いプラグインを使用している場合、または Font Awesome のバージョン 3 をまだ使用している場合は、古いプラグインで使用されている Font Awesome 3 の命名を使ったショートコード [icon]
の互換性を維持することで、アップグレードがスムーズにできるようにしました。ただし、バージョン 3 の命名サポートも間もなく削除する予定ですので、コードを更新するのに時間をかけすぎないようにしてください。
関連項目
GitHubの README に、WordPress サイトの所有者と開発者向けの詳細があります。
また、開発者向けの API ドキュメント があります。