カスタムヘッダーリンク(アイコン)

LinkedIn の場合は、この設定でアイコン名として fab-linkedin を使用できます。

ただし、そのアイコンは Discourse が使用するデフォルトのアイコンセットに含まれていないため、コンポーネントの別の設定にも追加する必要があります。

私の環境では、結果は以下のようになります。

もちろん可能です。このトピックには、カスタムアイコンの追加に関するセクションがあります。

設定が完了すれば、このテーマコンポーネントで追加した任意のカスタムアイコンを使用できるようになります。ぜひご確認いただき、問題が発生した場合はお知らせください。

その変更と、いくつかの実装改善をこちらで行いました。

新しいアップデートでは、使用するタイトルに基づいて、各リンクに固有のプレフィックス付きクラスが追加されます。たとえば、

facebook, fab-facebook, https://facebook.com, vdm, blank

と指定すると、リンクには以下のクラスが適用されます。

header-icon-facebook

テンプレートは header-icon-ICON-TITLE です。

これにより、CSS で以下のようにターゲットを指定できます。

.d-header-icons {
  .header-icon-facebook svg {
    fill: #4267b2;
  }

  .header-icon-twitter svg {
    fill: #1da1f2;
  }

  // ここに他のアイコンを追加
}

その結果、以下のような見た目になります。

colored icons

「いいね!」 4