# 自定义标题链接（图标） **URL:** \ **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:** 6
**Author:** ![digitaldominica](https://avatars.discourse-cdn.com/v4/letter/d/97f17d/32.png) [@digitaldominica](https://meta.discourse.org/u/digitaldominica)\ **Post date:** [2024年五月18日 11:55 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/196 "2024-05-18T11:55:24Z")
您好，此组件运行正常，但是如何为创建的链接添加活动类，使其在 Discourse（相同）上成为链接时，我的默认图标项具有活动类，但组件中的链接没有？ ---
**Author:** ![ljpp](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ljpp/32/96506_2.png) [@ljpp](https://meta.discourse.org/u/ljpp)\ **Post date:** [2024年七月9日 07:55 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/197 "2024-07-09T07:55:36Z")
这是一个有点令人困惑的主题，因为 OP 是作为 wiki 更新的，但大部分讨论都指的是几年前的组件版本。 主题和 OP 表明这除了文本链接外还支持图形图标。然而， **Object Settings Editor** 没有定义图标的字段。我尝试手动添加一个 SVG 图标： ```plaintext "icon": "https://foo.svg", ``` 图形按钮没有显示出来——我得到的是一个文本链接按钮，基于自定义链接的其他参数。此帖子和 OP 之间的旧讨论表明，我可能需要“在某处添加一些东西”来启用 SVG 图标，但是什么以及在哪里添加？ ---
**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年七月9日 11:59 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/199 "2024-07-09T11:59:37Z")
嘿， 您是指这个主题组件吗？ > [@Custom Header Links](https://meta.discourse.org/t/custom-header-links/90588): > > discourse2Summary Custom Header Links allows you to easily add custom text-based links to the header.eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/custom-header-links)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-custom-header-links](https://github.com/discourse/discourse-custom-header-links)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Features Desktop Mobile (due to very limited space I don’t recommend adding more th… 这个\*自定义标题链接（图标）\*主题组件没有 Object 设置。 如果您需要支持图标的标题链接，您可能想使用这个。 👍 ---
**Author:** ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)\ **Post date:** [2024年七月17日 07:03 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/200 "2024-07-17T07:03:52Z")
请注意，我刚刚将此组件迁移到了我们新的对象设置中： > > > Prior to this commit the setting was only a string split at runtime on a | separ…ator. This is now using our object settings and can be modifier more easily by ours users using the object editor. > > This commit also > \- fixes a bug where we were rendering, and only hiding mobile icons on desktop when using (vmo) which was causing the "last-custom-icon" class to be incorrectly set on an hidden icon > \- adds a system spec 现在修改设置应该会容易得多。 ---
**Author:** ![patrickemin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/patrickemin/32/520162_2.png) [@patrickemin](https://meta.discourse.org/u/patrickemin)\ **Post date:** [2024年七月18日 16:02 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/201 "2024-07-18T16:02:24Z")
您好，在尝试更新自定义页眉链接组件时，我遇到了这个错误：“发生错误：您为请求提供了无效的参数：JSON Pointer ‘/3/url’ 处的属性必须是有效的 URL。” ---
**Author:** ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)\ **Post date:** [2024年七月18日 16:15 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/202 "2024-07-18T16:15:11Z")
是的，我明白了可能导致此问题的原因……Schema 显示 `url: true`，实际上我们允许相对 URL，因此它只是一个字符串，被视为无效 URL。 我会查看一下。 ---
**Author:** ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)\ **Post date:** [2024年七月18日 17:03 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/203 "2024-07-18T17:03:10Z")
请向我展示您的组件设置。如果您愿意，可以通过私信发送。 ---
**Author:** ![patrickemin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/patrickemin/32/520162_2.png) [@patrickemin](https://meta.discourse.org/u/patrickemin)\ **Post date:** [2024年七月18日 18:43 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/204 "2024-07-18T18:43:39Z")
我现在不在家，会尽快处理。 ---
**Author:** ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)\ **Post date:** [2024年七月19日 16:46 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/205 "2024-07-19T16:46:55Z")
我直接与 Patrick 在私信中解决了这个问题，如果有人遇到同样的问题，问题在于这些新设置使得 URL 检查更加严格。 您在设置中填写的任何 URL 都应该是正确编码的 URL，最简单的解决方案是在浏览器的控制台中运行 `encodeURI`： 以这个 URL 为例：“/some-url?title=Foo bar:baz” ```plaintext encodeURI("/some-url?title=Foo bar:baz") ``` 将得到： ```plaintext /some-url?title=Foo%20bar:baz ``` ---
**Author:** ![patrickemin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/patrickemin/32/520162_2.png) [@patrickemin](https://meta.discourse.org/u/patrickemin)\ **Post date:** [2024年八月19日 12:43 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/206 "2024-08-19T12:43:08Z")
您好，虽然无法重新排序图标，但您可以通过点击组件中的“编辑器”按钮并重新排序代码行来编辑脚本以实现此目的： ![image](https://global.discourse-cdn.com/meta/original/4X/e/8/a/e8afc8c43deacc0e0e6994c9b595e14b45f4d9ca.png) ---
**Author:** ![Wingtip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/wingtip/32/102039_2.png) [@Wingtip](https://meta.discourse.org/u/Wingtip)\ **Post date:** [2025年三月10日 23:08 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/207 "2025-03-10T23:08:02Z")
正在运行 3.5.0.beta2-dev (137e8a0fa0)。我比最新版本[落后 14 个提交](https://github.com/discourse/discourse-icon-header-links/compare/952811b59eb7464454009ddce5597e6f35950ab5...b4078416a8ed8623e241e24bacb0526c7a9f6c19)。 当我尝试更新时，我收到一个错误： `发生错误：您向请求提供了无效参数：JSON 指针 '/1/title' 处的属性必须存在。JSON 指针 '/1/icon' 处的属性必须存在。JSON 指针 '/1/url' 处的属性必须存在。` 有什么办法可以解决这个问题吗？ ---
**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:** [2025年三月10日 23:49 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/208 "2025-03-10T23:49:19Z")
您可以通过点击 Settings Editor 来告诉我们您的设置吗？ ![image](https://global.discourse-cdn.com/meta/original/4X/c/e/c/cec9f243b758f0b668558782d01f869bbaac3726.png) 如果这是私密的，您可以给我发私信。 ---
**Author:** ![Wingtip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/wingtip/32/102039_2.png) [@Wingtip](https://meta.discourse.org/u/Wingtip)\ **Post date:** [2025年三月11日 08:55 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/209 "2025-03-11T08:55:41Z")
已发给你了，感谢！ ---
**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:** [2025年三月12日 13:10 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/210 "2025-03-12T13:10:14Z")
只是跟进一下。正如我所怀疑的，Wingtip 的迁移因某些原因失败了。我给了他正确的设置。我想知道迁移在什么情况下会失败。🤔 编辑： 实际上，它一开始并没有成功，所以我建议他这样做： > [@Arkshine](#): > > 你能试试以下方法吗： > > 1. 重置设置，然后保存。 > > ![image](https://global.discourse-cdn.com/meta/original/4X/4/8/c/48cc306400b7187625864255fd31e93e27ecdd7e.png) > > 1. 尝试更新组件 > 2. 如果成功，请将正确的设置重新导入到设置编辑器。 ---
**Author:** ![Wingtip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/wingtip/32/102039_2.png) [@Wingtip](https://meta.discourse.org/u/Wingtip)\ **Post date:** [2025年三月12日 17:17 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/211 "2025-03-12T17:17:10Z")
另外，不知何故它无法接受有效的设置；我不得不重置设置，更新，然后用正确的设置重新配置。没什么大不了的，不需要太多配置。再次感谢您的帮助！ ---
**Author:** ![icaria36](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/icaria36/32/426431_2.png) [@icaria36](https://meta.discourse.org/u/icaria36)\ **Post date:** [2025年三月30日 18:22 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/212 "2025-03-30T18:22:10Z")
> [@Johani](#): > > 当然，本主题中有一个关于添加自定义图标的部分。 > [Introducing Font Awesome 5 and SVG icons](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643) 你好，我无法渲染自定义 SVG 图标，希望你能帮助我找出问题所在。 我已将 SVG 文件上传到默认主题： ![image](https://global.discourse-cdn.com/meta/original/4X/6/e/f/6ef30da58a3716c18877683c23c0a83f9771df64.png) 然后我已将以下内容添加到此主题组件中： ![image](https://global.discourse-cdn.com/meta/original/4X/d/9/a/d9a280d32fe5a7c91b31be508244ad1d23adc699.png) ![image](https://global.discourse-cdn.com/meta/original/4X/d/c/a/dca8aad767e9202462d7404a9bd407979d3908b0.png) 我已使用 icons-sprite、fa-icons-sprite 和 fab-icons-sprite，但 SVG 无法渲染。占位符存在，可以点击，链接也有效，但矩形中没有图标。 检查器显示此： `` ---
**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:** [2025年三月30日 19:08 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/213 "2025-03-30T19:08:38Z")
我认为应该将其移到一个新的 #Dev 主题。 @icaria36 你能分享一下 `Three_asterisks` 的内容吗？ 精灵图集遵循特定的格式。 > [@Discourse](#): > > ```xml > > > > > > > > > > > > ``` 然后，您可以使用 `my-theme-icon-1`、`my-theme-icon-2` 作为您的标识符。 更多信息请访问 [https://meta.discourse.org/t/replace-discourses-default-svg-icons-with-custom-icons-in-a-theme/115736。](https://meta.discourse.org/t/replace-discourses-default-svg-icons-with-custom-icons-in-a-theme/115736%E3%80%82) ---
**Author:** ![icaria36](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/icaria36/32/426431_2.png) [@icaria36](https://meta.discourse.org/u/icaria36)\ **Post date:** [2025年三月31日 08:11 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/214 "2025-03-31T08:11:35Z")
@Arkshine 非常感谢！我确实看到了那个页面，但显然我滚得太快了。不，我还没有用 SVG 文件做那个作业。我会尝试一下（这是我第一次编辑 SVG 文件中的文本；万事都有第一次）：😅 希望这样就可以了。🙏 ---
**Author:** ![tknospdr](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tknospdr/32/529762_2.png) [@tknospdr](https://meta.discourse.org/u/tknospdr)\ **Post date:** [2025年六月1日 23:24 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/215 "2025-06-01T23:24:27Z")
我可以使用此组件加载 Facebook、Instagram 和 TikTok 图标，但无论我尝试什么，都无法加载原始 Twitter 图标或新的 X 图标。 有什么提示吗？ ---
**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:** [2025年八月4日 15:19 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/217 "2025-08-04T15:19:01Z")
也许分享你的配置会有帮助。没有它，很难帮助你。 对我来说，它运行正常 ![image](https://global.discourse-cdn.com/meta/original/4X/1/0/b/10b1e0aca6f2c47d8a76cf86dd81fa41df3861c6.png) ![image](https://global.discourse-cdn.com/meta/original/4X/6/5/c/65ca5dd3fd73c4f2e8890079f653b29fe6ef2f1f.png) [上一頁](https://meta.discourse.org/t/custom-header-links-icons/86307.md?page=5)