 |
概要 | Discourse FontAwesome Pro は、NPM パッケージのトークンを使用することにより、FontAwesome ライセンスに基づいて Font Awesome Pro アイコンを Discourse で使用できるようにします。 |
 |
リポジトリリンク | https://github.com/discourse/discourse-fontawesome-pro |
 |
インストールガイド | Discourse にプラグインをインストールする方法 |
設定
通常のプラグインとは異なり、これを有効にするにはいくつかの追加の手順が必要です：
まず、Font Awesome Pro パッケージのトークンを含む追加の環境変数を設定する必要があります（API トークンとは異なります）： 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 がそこからスプライトを取得できるようにしています。