機能
スクリーンショット
デスクトップ
モバイル
設定
このコンポーネントには、任意の数のリンクを追加し、アイコンを指定し、表示されるデバイスを決定できるテーマ設定が含まれています。
| 名前 |
説明 |
| header links |
以下のプロパティを持つリンクのリスト：タイトル、アイコン、URL、表示デバイス、ターゲット |
| add whitespace |
選択すると、デフォルトの Discourse ヘッダーアイコンとこのコンポーネントで追加されたカスタムアイコン間に余白が追加されます |
| Svg icons |
リストで使用されている各アイコンに対応する FontAwesome 6 アイコンクラスを含めます |
注:
使用したいアイコンが表示されない場合は、コンポーネントの svg_icons 設定に追加してください。新しいアイコンを追加する場合は、FontAwesome 6 のプレフィックス（fab、far、fas など）を付けてください。
クレジット
これは @techAPJ の素晴らしいチュートリアル（https://meta.discourse.org/t/add-new-link-on-header-beside-search-icon/48621）と、@vinothkannans の Brand header テーマに基づいています。後者はこのコンポーネントの構造の優れた参考資料となりました。
当方でホストされていますか？ テーマコンポーネントは、Standard、Business、Enterprise プランで利用可能です。
「いいね！」 93
上記でいくつかの方が言及されているのと同様の問題に直面しています。アイコンが表示されないのですが、ボタン自体はクリックできます。アイコン設定を「facebook-f」ではなく「fab-facebook-f」のように変更しました。Twitter や他のウェブサイトでは問題ないのですが、Facebook と LinkedIn ではまだ機能していません。
Facebook は解決できましたが、LinkedIn はまだうまくいきません。また、カスタムアイコンを作成することはできますか？会社のロゴをアップロードしてアイコンとして使用することは可能でしょうか？
私もです。Discord アイコンの問題です。
なぜ最新版に「svg アイコン」セクションがないのでしょうか？
私の環境では以下が表示されます：
その設定のスクリーンショットは、テキストリンク（アイコンではなく）を表示するための Custom Header Links - #84 コンポーネントのように見えます。
コンポーネントの名前が混乱を招くように命名されているのは理解できます。
@Johani さん、この方の名前に「icon」を追加したほうがいいかもしれませんね？
「いいね！」 4
ああ、これで解決しましたね。確かに、すごく混乱しますね。名前変更ができると最高なんですけど！
追記： 最近のアップデートで、Discord のクラス名に「fab-」が間に挿入されるように密かに変更されたようです（例えば、アイコンの色を変更したい場合など）。これは @OP が素晴らしいネイティブ機能として実装してくれると良いですね。少し見つけるのが難しかったです。
「いいね！」 1
Johani
(Joe)
93
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;
}
// ここに他のアイコンを追加
}
その結果、以下のような見た目になります。
「いいね！」 4
ご協力ありがとうございます。"Header Links"と"Svg Icons"の両方のカテゴリで"fab-linkedin"を試しましたが、写真をご覧いただくとわかる通り、何らかの理由でまだ動作していません。
灰色の円はLinkedInロゴが表示されるべき場所です。これを解決するための他のアイデアはありますか？
Johani
(Joe)
95
なぜそれが機能しないのか、私にも完全にはわかりません。私の設定は以下のようになっています。
Facebook, fab-facebook, https://facebook.com, vdm, blank
Twitter, fab-twitter, https://twitter.com, vdm, blank
LinkedIn, fab-linkedin, https://www.linkedin.com, vdm, blank
そして
fab-facebook
fab-linkedin
fab-twitter
以下が表示されています。
LinkedIn のアイコンでも同じ操作を試していただき、問題が解消するかどうかお知らせください。
「いいね！」 1
これが私が試してきたことです。また、異なるアイコンも試しました。現在の設定は以下の通りです。
設定:
ウェブサイト:
動作しているのは「fab-」を使用していないものだけですが、これは奇妙に思えます。ご意見をお聞かせください。
pmusaraj
(Penar Musaraj)
97
ミシェルさん、こんにちは。
お客様ですので、サイトを拝見し、問題解決を行いました。テーマコンポーネントを更新し、アイコンの設定を正しいものに変更しました。これですべて正常に動作するはずです。
「いいね！」 5
もう一つ質問とリクエストがあります。当初はこれらのリンクが新しいタブで開くようになっていましたが、現在は同じタブで開くようになってしまいました。設定はすでに「blank」に設定されているのですが、他にどのように変更すればよいでしょうか？
「いいね！」 2
pmusaraj
(Penar Musaraj)
100
これはリグレッションのようです。調査し、まもなく修正版をリリースします。
「いいね！」 1
Johani
(Joe)
101
その通りです。最近の変更で、target 属性をうっかり省略してしまいました。
お客様側で対応は不要です。コンポーネントを修正し、お客様のサイトで更新しました。これですべて問題なく動作するはずです。ご報告いただきありがとうございます 
「いいね！」 7
Canapin
(Coin-coin le Canapin)
102
こんにちは、
カスタムアイコンはログインとサインアップボタンの右側にありますが、通常は左側にあるため、左側の方が適切だと思います。
「いいね！」 3
Font Awesome Icons からバージョン 4.7.0 のアイコンを取得して、「ヘッダーリンク」の適切な部分に名前（例：car）を入力するだけで動作するものがあります。一部のアイコンは表示されません（例：fa-comments-o）。また、「Svg アイコン」を使用する必要がないもの（例：home）と、使用する必要があるもの（例：car）があります。
Find Icons with the Perfect Look & Feel | Font Awesome から試したバージョン 5 のアイコンは、どれも動作しませんでした。「ヘッダーリンク」と「Svg アイコン」の両方に fa- で始まる名前を入力しましたが、効果はありませんでした。ただし、デフォルトで存在していた fab-facebook（など）のアイコンは動作します。
何が間違っているのでしょうか？
編集：正確さを期すため、最初の段落を編集しました。
rolando
(rolando)
104
@Johani さん、ありがとうございます。これで完璧に動作し、「サイトに戻る」リンク（私の場合は）の「美的」な解決策を得ることができました。
ただし、モバイル向けの左側ハンバーガーメニュー コンポーネントも使用しているため、.d-header のその部分がすべて壊れてしまう問題に遭遇しました。
両方を共存させる方法についてアイデアはありますか？ぜひご教示ください。
misterjtc
(Jordan Cook)
105
アイコンが表示されない問題も発生しています。何が間違っているのか分かりません。設定には以下のような内容があります：
最終的にこのように表示されます：
rolando
(rolando)
106
ブックアイコンの場合は、fas-を付けずに試してみてください。
「いいね！」 2
