功能
截图
桌面端
移动端
设置
此组件包含一个主题设置，允许您添加任意数量的链接，指定它们的图标，并决定它们在哪些设备上显示！
| 名称 |
描述 |
| 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 主题，该主题为组件结构提供了重要参考。
\u003cbr\u003e
\u003e:discourse2: 由我们托管？ 主题组件可在我们的标准版、商业版和企业版计划中使用。
93 个赞
我和上面提到的几位用户遇到了类似的问题：图标没有显示，但我仍然可以点击按钮。我已经修改了图标设置，将其改为（例如）“fab-facebook-f”，而不仅仅是“facebook-f”。对于 Twitter 和我的其他网站，我没有遇到任何问题，但对于 Facebook 和 LinkedIn，仍然无法正常工作。
我已经搞定了 Facebook，但 LinkedIn 还是不行。另外，有没有办法自定义图标？我可以上传公司的 Logo 并把它用作图标吗？
那个设置截图看起来像是 Custom Header Links - #84 这个组件，它是用来显示文本链接而非图标的。
我能理解这些组件的命名方式为何令人困惑：
也许你应该在这个名称中加入“图标”一词，@Johani？
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 个赞
感谢您的帮助。我尝试在“页眉链接”和“SVG 图标”类别中都使用了“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
你好，Michelle，
既然您是我们的客户，我特意查看了您的网站，并为您解决了这个问题。我已更新了主题组件，并为图标设置了正确的配置，现在它们应该都能正常工作了。
5 个赞
还有一个问题/请求：我最初设置这些链接在新标签页中打开，但现在它们却在同一标签页中打开。设置已经是“空白”了，我该如何更改？
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 版本图标，但无一成功。我将 fa- 名称填入“标题链接”和
rolando
(rolando)
104
非常感谢你，@Johani。效果非常好，为我提供了一个“美观”的解决方案，用于添加“返回网站”的链接（在我的情况下）。
不过，我确实遇到了一个问题，因为我同时使用了 移动端左侧汉堡菜单 组件，这导致 .d-header 该部分的功能全部失效。
有什么建议可以让两者同时正常工作吗？非常感谢您的帮助。
misterjtc
(Jordan Cook)
105
我也遇到了图标无法显示的问题。不确定自己哪里做错了。以下是我在设置中的内容：
最终呈现的效果如下：
