# 自定义标题链接（图标）

**URL:** <https://meta.discourse.org/t/custom-header-links-icons/86307>\
**Category:** Theme component\
**Tags:** official, custom-header-icons\
**Created:** [2018年四月27日 14:00 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307 "2018-04-27T14:00:38Z")\
**Posts on this page:** 20\
**Page:** 5

<div class="post-metadata">

**Author:** ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)\
**Post date:** [2023年三月20日 03:53 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/174 "2023-03-20T03:53:24Z")

</div>

这个插件太挑剔了，很难让它正常工作。我正试图让[fa-bolt-lightning 图标](https://fontawesome.com/icons/bolt-lightning?s=solid&f=classic)实现与评论图标 (/latest) 相同的功能。我尝试了所有 fab-bolt-lightning、fas-bolt-lightning、fa-bolt-lightning 或 bolt-lighting 的组合，无论是用在标题链接字段还是 SVG 图标选择框中。我得到的结果始终是只有链接没有图标。真是让人抓狂。

---

<div class="post-metadata">

**Author:** ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)\
**Post date:** [2023年三月22日 10:22 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/175 "2023-03-22T10:22:45Z")

</div>

该组件使用旧的图标集，因此应该是 `bolt` 👍

 ![Untitled](https://global.discourse-cdn.com/meta/original/4X/2/2/d/22dbbb0a0f81f910afabe1dfe0731798246276ab.png)

---

<div class="post-metadata">

**Author:** ![mlac](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mlac/32/305803_2.png) [@mlac](https://meta.discourse.org/u/mlac)\
**Post date:** [2023年五月6日 12:42 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/177 "2023-05-06T12:42:39Z")

</div>

我正在尝试使用 `user-headset` Font Awesome 图标，该图标从 Font Awesome 5.7.0 开始可用，但它没有显示出来。

在插件配置页面上，我看到“\> 为列表中使用的每个图标包含 FontAwesome 5 图标类”的消息，但如果能显示插件使用的确切 Font Awesome 版本就好了。

另外，请在下一个插件版本中更新到最新的 Font Awesome 版本。

---

<div class="post-metadata">

**Author:** ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)\
**Post date:** [2023年五月6日 13:08 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/178 "2023-05-06T13:08:10Z")

</div>

`user-headset` 是一个专业图标，因此您需要专业订阅。如果您想使用免费的，那就是 `headset`。

---

<div class="post-metadata">

**Author:** ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)\
**Post date:** [2023年五月6日 13:41 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/179 "2023-05-06T13:41:58Z")

</div>

给这个组件一个建议。注意在移动视图的标题中有多少图标，因为它会很快被登录和注册按钮以及网站徽标挤满。例如，如果在这个组件中只放两个图标，在移动视图中会非常拥挤，可能会将菜单按钮推到屏幕外，并缩小你的网站徽标。我实际上更喜欢没有图标的简洁外观，并且只使用这个组件为要求它的移动用户在标题中放置一个额外的图标。

---

<div class="post-metadata">

**Author:** ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)\
**Post date:** [2023年五月24日 08:12 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/180 "2023-05-24T08:12:01Z")

</div>

3 篇帖子已拆分为新主题：[如何创建动态标题链接？](https://forums.example.com/t/how-to-create-a-dynamic-header-link/266019)

---

<div class="post-metadata">

**Author:** ![nathank](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nathank/32/290039_2.png) [@nathank](https://meta.discourse.org/u/nathank)\
**Post date:** [2023年五月23日 10:17 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/182 "2023-05-23T10:17:32Z")

</div>

> [@Lilly](#):
>
> 我实际上更喜欢没有图标的简洁外观，并且只将此组件用于在标题中为要求它的移动用户放置一个额外的图标。

同样，出于同样的原因，我在移动设备上隐藏了图标。但这会在移动设备上留下无链接的状况，这有点糟糕。

---

<div class="post-metadata">

**Author:** ![earbasher](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/earbasher/32/312879_2.png) [@earbasher](https://meta.discourse.org/u/earbasher)\
**Post date:** [2023年七月6日 21:35 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/183 "2023-07-06T21:35:57Z")

</div>

这在桌面上看起来很棒，但我也同意它在移动设备上会显得拥挤。  
有没有办法将移动链接设置为页脚而不是页眉？也许这有助于减少移动用户的混乱。

---

<div class="post-metadata">

**Author:** ![Ralf\_Stockmann](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ralf_stockmann/32/505867_2.png) [@Ralf\_Stockmann](https://meta.discourse.org/u/Ralf_Stockmann)\
**Post date:** [2023年七月7日 06:01 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/184 "2023-07-07T06:01:28Z")

</div>

此组件在上次更新后损坏，同时至少还有 5 个主题组件也损坏了。这目前导致了严重的问题。

---

<div class="post-metadata">

**Author:** ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)\
**Post date:** [2023年七月7日 07:45 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/185 "2023-07-07T07:45:47Z")

</div>

有几份报告称“Custom Wizard”是导致问题的原因。您是否安装了它？

---

<div class="post-metadata">

**Author:** ![Ralf\_Stockmann](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ralf_stockmann/32/505867_2.png) [@Ralf\_Stockmann](https://meta.discourse.org/u/Ralf_Stockmann)\
**Post date:** [2023年七月7日 08:28 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/186 "2023-07-07T08:28:24Z")

</div>

这招奏效了：非常感谢您的快速回复！

---

<div class="post-metadata">

**Author:** ![ostephens](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ostephens/32/282487_2.png) [@ostephens](https://meta.discourse.org/u/ostephens)\
**Post date:** [2023年八月11日 14:01 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/187 "2023-08-11T14:01:59Z")

</div>

人们在如何从旧的 Twitter logo 迁移到“X”方面有什么动作？目前看起来新的 X 品牌图标不会被添加到 Font Awesome 5 ☹

---

<div class="post-metadata">

**Author:** ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)\
**Post date:** [2023年八月11日 14:03 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/188 "2023-08-11T14:03:32Z")

</div>

> [@Updating Twitter icon to X logo](https://meta.discourse.org/t/updating-twitter-icon-to-x-logo/274265):
>
> [professor farnsworth futurama GIF] We’ve temporarily added the X logo as an available icon in core Discourse to allow everyone to make the branding switch on their own. Upgrading the entirety of Font Awesome in Discourse is a very large project, so this is meant to allow a workaround in the mean time. If you’re looking to make the change, you can follow these steps: Add temporary-twitter-x to your svg icon subset site setting Create a new theme component and add the following code to th…

---

<div class="post-metadata">

**Author:** ![ostephens](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ostephens/32/282487_2.png) [@ostephens](https://meta.discourse.org/u/ostephens)\
**Post date:** [2023年八月11日 14:23 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/189 "2023-08-11T14:23:55Z")

</div>

谢谢 @Moin - 这样就行了（而且就将其用在自定义标题链接组件而言，只需要第一步，如果您随后在组件设置中指定此图标作为要使用的图标的话）

---

<div class="post-metadata">

**Author:** ![barto\_95](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/barto_95/32/199996_2.png) [@barto\_95](https://meta.discourse.org/u/barto_95)\
**Post date:** [2024年一月10日 16:58 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/190 "2024-01-10T16:58:03Z")

</div>

我尝试添加地球图标但不起作用

我该怎么做？ [Globe Classic Solid Icon | Font Awesome](https://fontawesome.com/v5/icons/globe?f=classic&s=solid)

---

<div class="post-metadata">

**Author:** ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)\
**Post date:** [2024年一月10日 17:10 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/191 "2024-01-10T17:10:21Z")

</div>

您在标题链接设置中输入了什么？我刚试了 `globe icon title,globe,https://fontawesome.com/v5/icons/globe,vdm,blank`，它奏效了。

---

<div class="post-metadata">

**Author:** ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)\
**Post date:** [2024年一月10日 18:42 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/192 "2024-01-10T18:42:46Z")

</div>

此外，如果看不到它，您可以将 `globe` 添加到 `svg_icons` 设置中，以确保它会显示出来。

> [@Discourse](#):
>
> 任何不带 `fa-`、`fab-`、`fas-` 或 `far-` 部分的 [FontAwesome 5 (free) 图标](https://fontawesome.com/icons) 名称

我认为文档可能有点令人困惑。

默认情况下，它在设置中使用 `fab-twitter` 和 `fab-facebook`（有效）。屏幕截图显示它们没有 `fab-`，并且文档说要删除任何 `fab-`（这并不完全正确，因为有一些有效的图标带有 `fab-` 和 `far-`）。🤔

---

<div class="post-metadata">

**Author:** ![barto\_95](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/barto_95/32/199996_2.png) [@barto\_95](https://meta.discourse.org/u/barto_95)\
**Post date:** [2024年一月10日 18:45 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/193 "2024-01-10T18:45:25Z")

</div>

对我来说，所有图标都是 fab-discord 并且可以正常工作。我测试了没有 fab 的情况，它也正常工作，谢谢 🙂

---

<div class="post-metadata">

**Author:** ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)\
**Post date:** [2024年四月22日 14:56 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/194 "2024-04-22T14:56:19Z")

</div>

2 篇帖子已拆分为新主题：[自定义标题图标与核心标题图标不成比例](https://meta.discourse.org/t/custom-header-icons-disproportionate-to-core-header-icons/304909)

---

<div class="post-metadata">

**Author:** ![jrgong](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@jrgong](https://meta.discourse.org/u/jrgong)\
**Post date:** [2024年五月6日 11:33 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/195 "2024-05-06T11:33:44Z")

</div>

是否有当前用户所在页面/URI的占位符/变量，并将其渲染在标题链接中？

在我们的例子中，我们希望添加一个链接到我们的暂存环境，该链接会打开完全相同的页面。

例如：当用户在 `forum.xyz/admin/site_settings` 页面时，按钮链接将指向 `stagingforum.xyz/admin/site_settings`。

[上一頁](https://meta.discourse.org/t/custom-header-links-icons/86307.md?page=4)

[下一頁](https://meta.discourse.org/t/custom-header-links-icons/86307.md?page=6)
