|||
-|-|-|
| 概要 | Discourse FontAwesome Pro は、アカウントの NPM パッケージ トークンを使用して、Font Awesome Pro アイコンを Discourse で使用できるようにします。 FontAwesome ライセンスが必要です。
| リポジトリリンク | https://github.com/discourse/discourse-fontawesome-pro
| インストールガイド | Discourse にプラグインをインストールする方法
設定
通常のプラグインよりもいくつかの追加手順が必要です。
まず、Font Awesome Pro ライセンス キーを含む追加の環境変数 DISCOURSE_FONTAWESOME_AUTH_TOKEN を設定する必要があります。
インストール スクリプトは、初期化中に、追加の “after_code” フックとして呼び出す必要もあります。これにより、認証トークンを使用してビルド時に FontAwesome Pro SVG がダウンロードされ、追加されます。これは、プラグインのクローン ブロックとは別の追加ブロックです。
app.yml でのインストールの例を次に示します。
env:
DISCOURSE_FONTAWESOME_AUTH_TOKEN: 123456
hooks:
after_code:
- exec:
cd: $home/plugins
cmd:
- git clone https://github.com/discourse/discourse-fontawesome-pro.git
- exec:
cd: $home/plugins/discourse-fontawesome-pro
raise_on_fail: false
cmd:
- $home/plugins/discourse-fontawesome-pro/scripts/install.sh
オーバーライドするファミリーの選択:
管理設定で、デフォルトの Discourse アイコンファミリーをオーバーライドできます。
オーバーライドするスタイルの選択:
デフォルトのアイコン スタイルをオーバーライドすることもできます。
Duotone
Duotone のサポートを完全に制御するには、(テーマなどで) 次の CSS をオーバーライドし、独自のカラー スキームに置き換える必要があります。
svg {
--fa-secondary-color: red;
--fa-secondary-opacity: 0.6;
}
個々のアイコンを着色するには、SVG の ID を参照します。
#fad-search .fa-secondary {
--fa-secondary-color: red;
--fa-secondary-opacity: 0.6;
}
Duotone スタイリングの更新
クラスベースのセレクターを使用している場合:.fa-secondary { color: red; }スタイリングを CSS カスタム プロパティ を使用するように更新する必要があります。クラスベースの色のオーバーライドは、Font Awesome v7 で削除されたため、機能しなくなりました。
内部的には、FontAwesome のリポジトリを使用してフォントをプラグインの SVG フォルダにインストールしており、Discourse がスプライトをそこから取得できるようにしています。
当社でホストしていますか？ このプラグインは、当社のエンタープライズ プランで利用できます。
