# 如何在自定义页眉链接主题组件中使用自己的SVG图标？
**URL:** https://meta.discourse.org/t/how-to-use-my-own-svg-icons-in-custom-header-links-theme-component/238196
**Category:** Support
**Created:** [2022年九月6日 03:32 UTC](https://meta.discourse.org/t/how-to-use-my-own-svg-icons-in-custom-header-links-theme-component/238196 "2022-09-06T03:32:30Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@danielabc](https://meta.discourse.org/u/danielabc)
#### Post date: [2022年九月6日 03:32 UTC](https://meta.discourse.org/t/how-to-use-my-own-svg-icons-in-custom-header-links-theme-component/238196/1 "2022-09-06T03:32:30Z")
我安装了一个组件，该组件仅允许我通过 fontawesome 网站在论坛标签中放置图标，但我想使用自己的图标，该如何上传和使用它们？
[image]
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [2022年九月6日 04:55 UTC](https://meta.discourse.org/t/how-to-use-my-own-svg-icons-in-custom-header-links-theme-component/238196/2 "2022-09-06T04:55:34Z")
[在主题中替换 Discourse 的默认 SVG 图标为自定义图标](https://meta.discourse.org/t/replace-discourses-default-svg-icons-with-custom-icons-in-a-theme/115736)
---
### Author:  [@danielabc](https://meta.discourse.org/u/danielabc)
#### Post date: [2022年九月7日 21:08 UTC](https://meta.discourse.org/t/how-to-use-my-own-svg-icons-in-custom-header-links-theme-component/238196/3 "2022-09-07T21:08:26Z")
感谢您的回复，我想要使用这个
> [@Custom Header Links (icons)](https://meta.discourse.org/t/custom-header-links-icons/86307):
>
> discourse2Summary Custom Header Links (icons) will allow you to easily add linked icons to the Discourse header.eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/custom-header-links-icons)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-icon-header-links](https://github.com/discourse/discourse-icon-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 Screenshots Desktop Mobile Settings This component includes a …
但不知何故，我在我的网站上上传的 SVG 图标无法在此处使用。
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [2022年九月7日 21:11 UTC](https://meta.discourse.org/t/how-to-use-my-own-svg-icons-in-custom-header-links-theme-component/238196/4 "2022-09-07T21:11:14Z")
哦。我怀疑你需要做一些工作才能实现。我已相应地更改了您的标题，希望它能引起对该主题组件有更多了解的人的注意。
它说：
> [@Johani](#):
>
> 图标可以是任何 [FontAwesome 5 (免费) 图标](https://fontawesome.com/icons) 的名称，但去掉 `fa-`、`fab-`、`fas-` 或 `far-` 部分
我认为这意味着使用其他图标很难或不可能。
---
### Author:  [@keegan](https://meta.discourse.org/u/keegan)
#### Post date: [2022年九月16日 19:28 UTC](https://meta.discourse.org/t/how-to-use-my-own-svg-icons-in-custom-header-links-theme-component/238196/5 "2022-09-16T19:28:47Z")
现在支持添加自定义图标，自此提交以来：
>
>
> This PR adds support for adding a custom icon through a URL so that you can add …icons from sources other than Font Awesome.
>
> \
>
> Fulfills a request such as the one mentioned on Meta here:
> https://meta.discourse.org/t/how-to-use-my-own-svg-icons-in-custom-header-links-theme-component/238196
在主题设置中添加标题链接时，粘贴图标的网址即可在标题中显示。
---
### Author:  [@danielabc](https://meta.discourse.org/u/danielabc)
#### Post date: [2022年十月12日 08:29 UTC](https://meta.discourse.org/t/how-to-use-my-own-svg-icons-in-custom-header-links-theme-component/238196/6 "2022-10-12T08:29:53Z")
您好！感谢您的回复和帮助！我该如何安装它？
---
### Author:  [@keegan](https://meta.discourse.org/u/keegan)
#### Post date: [2022年十月12日 15:06 UTC](https://meta.discourse.org/t/how-to-use-my-own-svg-icons-in-custom-header-links-theme-component/238196/7 "2022-10-12T15:06:32Z")
您好 @danielabc
您只需导航到 `/admin/customize/themes` 中的组件，找到 **Icon Header Links** 组件。如果它不是最新版本，您应该会看到一个更新按钮。
更新主题组件后，在您配置每个图标链接的主题设置中，只需使用图片源的 URL 而不是 Font Awesome 图标名称。
例如，这是我设置链接的方式：
```plaintext
Desktop mobile link, https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Pok%C3%A9_Ball_icon.svg/1200px-Pok%C3%A9_Ball_icon.svg.png, https://facebook.com, vdm, self
```
渲染效果如下：
