 |
概要 | Discourse FontAwesome Pro は、アカウントの NPM パッケージトークンを使用して、FontAwesome ライセンスに基づき、Discourse で Font Awesome Pro アイコンを利用できるようにします。 |
 |
リポジトリリンク | 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）
二重色サポートを完全に制御するには、以下の 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;
}
二重色スタイルの更新
クラスベースのセレクターを使用している場合：.fa-secondary { color: red; }スタイリングを CSS カスタムプロパティ を使用するように更新する必要があります。クラスベースの色オーバーライドは、Font Awesome v7 で廃止されたため、もはや機能しません。
内部では、FontAwesome のリポジトリを使用してフォントをプラグインの SVG フォルダにインストールし、Discourse がそこからスプライトを取得できるようにしています。
当方でホストされていますか？ このプラグインは、当社のエンタープライズプランで利用可能です。