Discourse FontAwesome Pro

プラグイン
,
1

|||
-|-|-|
:discourse2: | 概要 | Discourse FontAwesome Pro は、アカウントの NPM パッケージ トークンを使用して、Font Awesome Pro アイコンを Discourse で使用できるようにします。 FontAwesome ライセンスが必要です。
:hammer_and_wrench: | リポジトリリンク | https://github.com/discourse/discourse-fontawesome-pro
:open_book: | インストールガイド | 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 アイコンファミリーをオーバーライドできます。

imagen
imagen1633×156 11.3 KB

オーバーライドするスタイルの選択:

デフォルトのアイコン スタイルをオーバーライドすることもできます。

imagen
imagen1642×161 10.3 KB

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;
}

:warning: Duotone スタイリングの更新
クラスベースのセレクターを使用している場合:

.fa-secondary { color: red; }

スタイリングを CSS カスタム プロパティ を使用するように更新する必要があります。クラスベースの色のオーバーライドは、Font Awesome v7 で削除されたため、機能しなくなりました。

内部的には、FontAwesome のリポジトリを使用してフォントをプラグインの SVG フォルダにインストールしており、Discourse がスプライトをそこから取得できるようにしています。

:discourse2: 当社でホストしていますか？ このプラグインは、当社のエンタープライズ プランで利用できます。

「いいね！」 36