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 ドキュメント があります。

スクリーンショット

  • 編集バーより任意のテキストブロックにアイコンを追加
  • Font Awesome 無料版またはプロ版 (サブスクリプション) よりアイコンを検索して追加
  • プレビューモードまたは公開されたページや投稿でアイコンを表示
  • Font Awesome きっとを使用して、サイトのアイコンを強化します
  • または、Font Awesome の CDN を使用します
  • サイトで利用されている Font Awesome の競合するバージョンの問題を検出して修正
  • クラシックエディタにもアイコンを追加します

インストール

WordPress 管理者のプラグインディレクトリより

WordPress 管理者の「ラグインを追加」ページより:

  1. author: fontawesome でプラグインのディレクトリを検索します

  2. プラグインの検索結果で FontAwesome の “今すぐインストール” をクリックします

  3. 「有効化」をクリックします

Zipアーカイブでのインストール

  1. このプラグインのディレクトリでダウンロードをクリックし、.zip ファイルを取得します

  2. WordPress 管理者の「プラグインの追加」ページで、「プラグインのアップロード」をクリックし、.zip ファイルを選択します

Font Awesome プラグインの設定にアクセス

Font Awesome プラグインを有効化すると、WordPress の管理画面の設定メニューにFont Awesome が表示されるか、プラグインのインストール済みプラグインの一覧で設定をクリックすることができます。

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

プロ版のアイコンと機能の使用
CDNでプロ版のアイコンを有効にするには、Font Awesome CDN 設定ページの許可されたドメインのリストにドメインを追加する必要があります。 キットを構成するには、 FontAwesomeアカウントページからAPIトークンを取得します。

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

FAQ

プラグインの使用に関する詳細、利用可能な設定の詳細、よくある質問への回答は、WordPress docs on Font Awesome で見ることができます。

評価

2023年12月24日
コード書くのが面倒でこのプラグインを使っています。今後もノーコード感覚で使いやすいものを提供していただけると助かります。ありがとうございました。
2023年2月20日
Using the CDN or Kit option there's no difference, most of the 2,020 free icons found on fontawesome page by searching with the "Free" filter won't show at all, just a crossed out rectangle appears. Backward compatibility selected 6.x or 5.x, tried every combination and many many many many Free Icons, It's the official plugin guys... can't you do it rigth? Maybe your select and insert block friendly thing works. But some of us need to use the pseudo-element method. By the way thanks for the plugin...
2023年2月4日
For a free product this works quite well and allows users to quickly add font-awesome to their site without messing with custom code. If they offered a Pro version of this then it would definitely need to be cleaned up to work more easily on the editor side, however for a free piece of software its pretty nice and allows me to more easily integrate font-awesome into my sites. Thanks!
2022年7月14日
As soon as I enabled it the entire site was down - stuck with the browser trying to connect to fontawesome. not very awesome...
2022年3月29日
The Font Awesome plugin makes it easy to stay on top of the latest version that is otherwise hidden away in some assets folder. Block editor support makes it easy to insert icons without having to remember their names. Can't wait for version 6.
52件のレビューをすべて表示

貢献者と開発者

Font Awesome はオープンソースソフトウェアです。以下の人々がこのプラグインに貢献しています。

貢献者

“Font Awesome” は14ロケールに翻訳されています。 翻訳者のみなさん、翻訳へのご協力ありがとうございます。

“Font Awesome” をあなたの言語に翻訳しましょう。

開発に興味がありますか ?

コードを閲覧するか、SVN リポジトリをチェックするか、開発ログRSS で購読してみてください。

変更履歴

4.4.0

  • Update the Icon Chooser to fix the use of Sharp Solid in more recent versions of Font Awesome,
    and include Sharp Regular and Sharp Light.
  • Add the “defer” attribute to script tags when in “Use a Kit” mode. This was already the behavior
    under “Use CDN” mode.
  • Fix some deprecation notices for php 8.2.

4.3.2

  • Security Fix: escape shortcode attribute values.

4.3.1

  • Increase network request timeout to accommodate some slow-running Icon Chooser searches.
    We’ve recently added some new functionality to the Font Awesome API server. We’re in
    the process of optimizing it for performance. In the meantime, some icon searches that
    return lots of search results are running slowly. Increasing the timeout
    allows those searches to run longer before considering it an error.

4.3.0

  • Introduce support for Sharp Solid.
    The Icon Chooser now includes Sharp Solid among the available styles when using
    a Font Awesome Pro Kit.
  • Introduce support for WordPress multisite. Allows installing the plugin network-wide
    and configuring each site separately.
    Previous versions of this plugin were not compatible with multisite, though it was
    possible to install and get partial functionality on multisite. However, this
    could also result in a confusing database state. If you’re running multisite,
    it’s important that any installation of a previous plugin version is totally cleaned
    up before trying to install this version. Upgrading on multisite without cleaning up
    first will probably result in an error. A previous installation can usually be
    cleaned up by deactivating and uninstalling it. Uninstall must be done by clicking
    “Delete” on the deactivated plugin’s entry in the plugin list in the admin dashboard.
    It may also work to install the previous 4.2.0 version and then uninstall it, just
    to get its cleanup code to run.
    This has no impact on sites that are not running in multisite mode. If you’re not
    running multisite, upgrading to this version should be smooth and problem-free.

4.2.0

  • Make Font Awesome 6 the default version on new activations.
  • On the version selection dropdown, distinguish between the latest 5.x and the latest 6.x.
  • Maintenance updates to JavaScript dependencies.
  • Developers: the latest_version() method has been deprecated and replaced by two alternatives:
    latest_version_5() and latest_version_6().

4.1.1

  • Simplified upgrade logic: makes the upgrade process on the first page load
    after upgrade quicker and smoother.

4.1.0

  • Added support for using Font Awesome Version 6 Free with CDN. In order to use
    Version 6 Pro with this plugin, it’s still necessary to use a Kit,
    since Version 6 Pro is not available on the classic CDN.
  • Renamed the “Version 4 Compatibility” option as “Older Version Compatibility”,
    since compatibility features may now involve both Version 4 and Version 5.
  • Updated version of the conflict detection script used when configured for CDN.
  • FIX: in some cases, when running the conflict detector on the back end,
    there was an error about an undefined variable called $should_enable_icon_chooser.
    Fixed.
  • FIX: in some cases, when running php 8.0 or higher, there was an error related to
    calling method_exists(). Fixed.
  • Developers: The v4_compatibility() method has been deprecated and will be removed
    in a future release. It’s now just compatibility().
  • Developers: The preference named “v4Compat” in the array argument to the register()
    method has been deprecated and renamed “compat”. Any uses of “v4Compat” are automatically
    translated to “compat”.
  • Developers: There are no breaking changes. Any code that uses the above deprecated
    features will continue to work the same without modification in this release.

4.0.4

  • FIX: add hash values to JavaScript chunk file names to resolve the problem where
    sometimes an old cached version of a JavaScript file would load in the browser
    instead of the intended updated one. This caused some users to see a blank
    settings page after upgrading from a previous version of the plugin.

4.0.3

  • FIX: When in the Classic Editor in WordPress 5, do not load block editor
    script dependencies that assign to the global wp.editor object.
    This prevents problems with other plugins on the page that may depend on that
    global.
  • FIX: When in the Classic Editor where multiple editor instances are present,
    ensure that the Add Font Awesome media button on each is wired up to
    load the Icon Chooser on click, not just those buttons that were on the page
    at the time this plugin’s initialization code is run.

4.0.2

  • FIX: re-enable the Icon Chooser in the Classic Editor on WordPress 4.
  • FIX: in some cases where the path to the plugin was a non-standard
    location–such as when installed via composer–the admin settings page and
    Icon Chooser would not load correctly. Fixed.
  • FIX: the global version of the lodash JavaScript library was again being overwritten
    by the version used by this plugin. Fixed.
  • The Icon Chooser’s integration with the Block Editor (Gutenberg) has been disabled
    for WordPress 5.0, 5.1, 5.2, and 5.3, due to incomptabile JavaScript libraries.
    All other features of the plugin work normally on those versions, including
    Icon Chooser integration with the Classic Editor.

4.0.1

  • FIX: In scenarios where both Gutenberg (Block) and TinyMCE (Classic)
    editors were being loaded onto the same page, the Gutenberg editor was not
    displaying properly.
    Now, in that multi-editor situation, the Icon Chooser integration is only enabled
    for the block editor.
    In those cases, you can still use icon shortcodes or HTML in
    the TinyMCE editor boxes; those editors just won’t have the “Add Font Awesome”
    media button for opening the Icon Chooser.
    The Icon Chooser is still available from the Classic Editor when the block editor
    is not present on the page.
  • FIX: In scenarios where there are multiple TinyMCE editor instances on the same page,
    such as WooCommerce product editing pages, only the “Add Font Awesome” media
    button on the first of those editors was working correctly. Now all of them work
    correctly.
  • FIX: In the Classic Editor, when other themes or plugins added media buttons after
    the “Add Font Awesome” button, those buttons were showing up as combined together
    and not working properly. Now they’re separated and working great.
  • The Icon Chooser integration for the Classic Editor in WordPress 4 has been temporarily
    disabled. Everything else works as before in WP4, just not the new Icon Chooser.

4.0.0

  • OFFICIAL 4.0.0 STABLE RELEASE
  • FEATURES: Includes all the features from the early 4.0.0 release candidates (details below)
  • 機能: ビジュアルアイコンチューザーを使用すると、正しいショートコードを検索して簡単に挿入することができます。
  • Fixed regression on overriding global lodash version.
  • Added PHP API method to get current Kit token.
  • Removed the filter to process all shortcodes in widget text. This seems to have been
    an overly eager approach on our part. If you want shortcodes to be processed
    in widget text – all shortcodes, not just this plugin’s icon shortcode – you can
    add a line like this to your theme’s functions.php file:
    add_filter( 'widget_text', 'do_shortcode' );

4.0.0-rc23

  • 修正: バージョン「5.x」または「6.x」のキットを処理するようになりました

  • FEATURE: shortcode supports attributes: style, role, title, aria-hidden,
    aria-label, aria-labelledby

4.0.0-rc22

  • Metadata about available Font Awesome releases is now stored as a normal option
    in the WordPress database, instead of as a transient. Thus, it does not expire
    and does not disappear if the transient cache is purged.

    This is in part to avoid the scenario where a request to the Font Awesome API
    server may be required to refresh metadata in response to a front end page load
    when that transient expires.

    Some site owners had occassionally experienced problems where a sudden burst of
    requests to the API server from many WordPress sites caused this plugin to fail
    when making a request with an error like ‘An unexpected response was received
    from the Font Awesome API server.’ This change means that it is significantly
    less likely that such a scenario will occur.
    (Additionally, changes have been made on the API server, also making it
    significantly less likely that this over-load failure will occur again.)

  • Developers: the refresh_releases() API method has been deprecated to discourage
    unnecessary blocking network requests to the API server.

4.0.0-rc21

  • optimize normal page loads by loading much less metadata from the database (GitHub #96)
  • move the Font Awesome settings link from the main admin nav menu back down under Settings, where it used to be
  • update the version of the conflict detection script to one that also detects conflicting Kits
  • minor maintenance changes to keep JavaScript dependencies up to date
  • fix a bug involving the pseudo-elements setting when moving back and forth between using a Kit and using CDN (GitHub #82)

4.0.0-rc20

  • developer-oriented update to support building themes that use this code as a composer package

4.0.0-rc19

  • another minor update with additional error logging

4.0.0-rc18

  • 追加のエラーログを含むマイナーアップデート

4.0.0-rc17

SECURITY: fixes a vulnerability in how API tokens were being stored, when configured to use a Kit. All users of 4.0.0-rc15 or 4.0.0-rc16 should update immediately. Find more details and instructions for updating your API Token on the Font Awesome blog.

  • a minor bug in how network errors are handled

4.0.0-rc16

  • アップグレードプロセスの修正

4.0.0-rc15

MAJOR UPDATE, some breaking changes for developers. Improves conflict detection, adds support for Kits and internationalization.

  • Includes auto-upgrade logic so that most users can upgrade with no impact, except those that have “registered client” themes or plugins. Users who had previously enabled the “remove unregistered clients” option should verify that the auto-upgrade worked successfully – check that your icons are appearing correctly. If not, run the Conflict Scanner from the Troubleshoot tab.
  • New conflict detection and resolution: The new conflict detection scanner can be enabled to more precisely discover conflicting versions of Font Awesome and provides more granular conflict resolution.
  • Expanded error handling with detailed reports in the web console for more advanced diagnostics.
  • キットのサポートを追加。
  • PHPとJavaScriptで国際化を追加。
  • 管理UIの新しいデザイン。
  • Developers: Significant changes to the way the settings are handled internally: Font Awesome will always load in the way the WordPress admin chooses. Registered themes or plugins may register preferences (which are displayed to the admin), but the site admin will determine the configuration.
  • Developers: Registered client plugins and themes need to be updated before they will work as expected.
  • Developers: The PHP API contains significant changes. See the GitHub README for an overview and the PHP API docs for details. This release is intended as a final API-changing release before stabilizing the API at 4.0.0. Once 4.0.0 is released, it will follow semantic versioning best practices.

4.0.0-rc13

  • Improve diagnostic output for unhandled errors.

4.0.0-rc12

  • Bug fix: Fix loading of admin page assets when removal of unregistered clients is enabled. This bug has been
    hiding under a rock for a while. rc11 turned over the rock, and this bug scurried out.

4.0.0-rc11

  • Bug fix: enqueue Font Awesome assets in admin and login areas, not just in the front end

4.0.0-rc10

  • Attempt to fix a problem where the admin settings is sometimes being confused by unexpected output from the WordPress
    server. This condition has been reported when certain other plugins are active, and (possibly) when PHP output
    buffering works differently than this plugin expects.

4.0.0-rc9

  • Enhance Font Awesome version 4 compatibility: add shimming of the version 4 font-family to enable version 4
    icons defined as pseudo-elements to be rendered via the version of Font Awesome 5 loaded by this plugin.

  • Add warnings to the admin UI to indicate that using svg and pseudo-elements may result in slow performance,
    and that svg with pseudo-elements and version 4 compatibility is not supported at all.

4.0.0-rc8

  • Remove dependence on third party libraries, eliminating a class of potential conflicts with other plugins.

  • Breaking changes to the API used by theme and plugin developers (no breaking changes for WordPress site owners).
    See commit log

4.0.0-rc7

  • Fix detection and removal of unregistered clients by changing the internal resource name this plugin uses to enqueue its resource.
    Change it to something unlikely to be used by other themes or plugins.

4.0.0-rc6

  • Fix error when updating options on admin page: handle null releaseProviderStatus in cases where the release provider
    does not have to make a network request to update release metadata.

4.0.0-rc5

  • Remove tilde character from JavaScript filenames to avoid violating some URL security rules

4.0.0-rc4

  • Cache releases data in the WordPress database to reduce the number of server-side network requests.

  • Ensure that releases data are always loaded fresh from fontawesome.com when loading the admin
    settings page so site owners can see when new versions are available.

  • Add more specific error message on admin dashboard in the event that the WordPress server is not able to
    reach fontawesome.com in order to get an initial set of available releases data.

4.0.0-rc3

  • Add missing v3 shim file

4.0.0-rc2

  • Fix handling of v3 deprecation warnings in admin settings page

4.0.0-rc1

  • 管理者設定ページを追加
  • Lots of back end code changes to support theme and plugin developers
    • Package plugin as a composer dependency
    • API の変更
    • Comprehensive API documentation for developers
  • Cache load specification unless client requirements change
  • Handle changing configurations as new plugins or themes are activated, de-activated or updated
  • Lock working load specifications and only rebuild when new requirements are conflict-free
  • Load Font Awesome release version metadata from the fontawesome.com releases API

3.2.1

  • Last stable version of the old plugin