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

**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:** 4

<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: [2021年六月24日 13:45 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/150 "2021-06-24T13:45:16Z")

</div>

> [@Jonathan5](#):
>
> 我也让它生效了（在 SVG 图标 **和** 主题组件中都使用了"building"）

天哪——这确实解决了问题，非常感谢！  
我试过只在主题组件中使用"building"（不行），也试过在两个地方都使用"fas-building"（也不行），但没想到要在_两个_字段中都尝试 plain 版本。

我仍然建议在组件描述中更清楚地说明 fa(s) 与 fab/far 之间的区别。

---

<div class="post-metadata">

### Author: ![Programer-D](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/programer-d/32/215194_2.png) [@Programer-D](https://meta.discourse.org/u/Programer-D)
#### Post date: [2021年六月26日 11:29 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/151 "2021-06-26T11:29:42Z")

</div>

你好。  
感谢提供如此出色的插件。

如果您能提供一些支持，我将不胜感激。

我的 Discourse 启用了“需要登录”的设置。  
当我访问启用了该设置的站点时，系统自然会提示我创建账户或登录，同时头部会显示我用此插件创建的图标。

 ![image](https://global.discourse-cdn.com/meta/original/3X/c/3/c3f8396dae9310137623c19bed95d2c7facd1948.png)  
需要账户或登录页面（日语）

如果仅此而已，那倒没有问题。但问题是，点击该图标后，即使未登录，也能直接打开链接的页面。  
（该链接指向我自己创建的插件，其路径是直接位于站点根目录下的路径，例如 `/test_path`。即使对于此类路径，如果直接输入 URL 访问，系统仍会提示创建账户或登录。只有当通过此插件的头部图标访问时，页面才会在未登录状态下直接显示。）

最佳的解决方案是根本不要显示该图标。但退一步说，至少需要确保点击该图标时，能够跳转到要求登录的页面。

非常希望您能协助解决此问题。衷心感谢！

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [2021年七月5日 12:50 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/152 "2021-07-05T12:50:30Z")

</div>

嘿 @Johani。看起来这需要根据主题变量的新工作方式更新。我在管理面板中看到了这个错误：

```plaintext
错误：未定义的变量："$add-whitespace"。位于 common.scss 第 14 行 >> @if $add_whitespace == "true" { ----^

```

---

<div class="post-metadata">

### Author: ![Hughat](https://avatars.discourse-cdn.com/v4/letter/h/bbe5ce/32.png) [@Hughat](https://meta.discourse.org/u/Hughat)
#### Post date: [2021年九月11日 14:00 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/153 "2021-09-11T14:00:23Z")

</div>

你好，

我正在链接到一个受限访问页面，需要向 URL 传递一些变量。请问是否可以使用一些系统变量，例如用户名、用户 ID、邮箱等？

---

<div class="post-metadata">

### Author: ![littleviolette](https://avatars.discourse-cdn.com/v4/letter/l/d26b3c/32.png) [@littleviolette](https://meta.discourse.org/u/littleviolette)
#### Post date: [2021年九月24日 18:26 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/154 "2021-09-24T18:26:58Z")

</div>

我正在寻找同样的东西。我想在点击标题图标时，将已登录用户的用户名发布到远程服务器。我了解可以通过 JavaScript 获取用户名，但我不确定如何通过标题图标来实现这一点：

```javascript
<script type="text/discourse-plugin" version="0.8">
const username = api.getCurrentUser().username;
</script>

```

谢谢！

---

<div class="post-metadata">

### Author: ![jimkleiber](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jimkleiber/32/121814_2.png) [@jimkleiber](https://meta.discourse.org/u/jimkleiber)
#### Post date: [2022年一月6日 19:54 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/155 "2022-01-06T19:54:54Z")

</div>

温馨提示，我注意到“主题设置”说明中存在一个错误。

顶部显示顺序是 `title, icon, URL, view, target`。

但底部显示顺序是 `title, icon, view, URL, target`。

顶部是正确的，URL 在 view 之前。

请看下面的截图：

 ![image](https://global.discourse-cdn.com/meta/original/3X/c/4/c4f2537168df8df93f6ed5523496f00fb5402c83.png)

---

<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: [2022年一月6日 21:56 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/156 "2022-01-06T21:56:43Z")

</div>

我刚刚为此做了一个PR：

> <https://github.com/discourse/discourse-icon-header-links/pull/6>
>
> Minor tweak to Theme settings as per https://meta.discourse.org/t/custom-header-…links-icons/86307/155

---

<div class="post-metadata">

### Author: ![jimkleiber](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jimkleiber/32/121814_2.png) [@jimkleiber](https://meta.discourse.org/u/jimkleiber)
#### Post date: [2022年一月6日 22:02 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/157 "2022-01-06T22:02:34Z")

</div>

谢谢！我想总有一天我会学会如何做，并有勇气去做一个 PR 😃

---

<div class="post-metadata">

### Author: ![Mr.X\_Mr.X](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mr.x_mr.x/32/126610_2.png) [@Mr.X\_Mr.X](https://meta.discourse.org/u/Mr.X_Mr.X)
#### Post date: [2022年二月3日 17:31 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/159 "2022-02-03T17:31:31Z")

</div>

有办法指示图标的位置吗？我正在使用一个自定义图标，但聊天和另一个主题组件图标在同一个标题中，我想将自定义标题图标设置在搜索图标旁边。

---

<div class="post-metadata">

### Author: ![diabolicvincent](https://avatars.discourse-cdn.com/v4/letter/d/4da419/32.png) [@diabolicvincent](https://meta.discourse.org/u/diabolicvincent)
#### Post date: [2022年四月30日 10:45 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/161 "2022-04-30T10:45:45Z")

</div>

大家好！

感谢这个很棒的主题组件！不过我遇到了一点问题：有些图标工作正常，例如 `fa-rocket`，但有些图标却不显示，例如 `fa-rocketchat`，尽管我认为我已经安装了所有必需的图标类。知道是什么原因造成的吗？非常感谢 🙂

另外：如何获取常规的 Font Awesome 图标而不是实心图标？我尝试包含 `far-iconname` 和 `fa-regular`，但这似乎不起作用……

---

<div class="post-metadata">

### Author: ![ondrej](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ondrej/32/198804_2.png) [@ondrej](https://meta.discourse.org/u/ondrej)
#### Post date: [2022年四月30日 17:38 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/162 "2022-04-30T17:38:42Z")

</div>

> [@diabolicvincent](#):
>
> `far-iconname` 和 `fa-regular` 但这似乎不起作用……

可能是因为这个

> [@Johani](#):
>
> 图标可以是任何 [FontAwesome 5 (免费) 图标](https://fontawesome.com/icons) 名称，不带 `fa-`、`fab-`、`fas-` 或 `far-` 部分

关于你问题的第一个部分。我可能错了，但试试在你的站点设置的 `svg icon subset` 中添加 rocket chat 图标。

---

<div class="post-metadata">

### Author: ![diabolicvincent](https://avatars.discourse-cdn.com/v4/letter/d/4da419/32.png) [@diabolicvincent](https://meta.discourse.org/u/diabolicvincent)
#### Post date: [2022年五月2日 19:46 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/163 "2022-05-02T19:46:22Z")

</div>

抱歉，这并不能为我解决问题。

页眉链接是：

```plaintext
Rocket.Chat,rocket,https://chat.domain.de,vdo,blank

```

在“主题组件设置”下的 **SVG 图标** 以及“Discourse 主设置”下的 **SVG 图标子集** 中，我已按照[Font Awesome 图标说明](https://fontawesome.com/icons/rocketchat?s=brands)中的详细说明添加了 `fa-rocketchat` 和 `fa-brands`。它自 FA 5.0.0 版本起就已支持，所以不可能是这个问题……

有人有什么想法，或许能帮帮我吗？ 🙂

---

<div class="post-metadata">

### Author: ![Jonathan5](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jonathan5/32/197134_2.png) [@Jonathan5](https://meta.discourse.org/u/Jonathan5)
#### Post date: [2022年五月2日 20:41 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/164 "2022-05-02T20:41:03Z")

</div>

您需要：

1. 将 `fab-rocketchat` 添加到 `svg icon subset`。
2. 将 `Header links` 更改为 `Rocket.Chat,fab-rocketchat,https://chat.domain.de,vdo,blank`。

这些说明具有误导性，但回顾一下，可能并不算不准确：

> [@Johani](#):
>
> 图标可以是任何 [FontAwesome 5 (free) 图标](https://fontawesome.com/icons) 的名称，不带 `fa-`、`fab-`、`fas-` 或 `far-` 部分。
> 
> 如果您想使用的图标未显示，请将其添加到组件的 `svg_icons` 设置中。如果您添加新图标，它们需要以 FontAwesome 5 前缀（如 fab、far 和 fas）作为前缀。

困难之处在于，您必须将 Font Awesome 网站上的 `fab fa-rocketchat` 转换为 Discourse 上的 `fab-rocketchat`。

---

<div class="post-metadata">

### Author: ![danielabc](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@danielabc](https://meta.discourse.org/u/danielabc)
#### Post date: [2022年九月7日 20:58 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/165 "2022-09-07T20:58:41Z")

</div>

有什么方法可以添加我上传到网站的 SVG 图标？（不使用 Font Awesome 网站上的图标）

---

<div class="post-metadata">

### Author: ![danielabc](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@danielabc](https://meta.discourse.org/u/danielabc)
#### Post date: [2022年九月7日 21:27 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/166 "2022-09-07T21:27:22Z")

</div>

我绞尽脑汁想解决一个我不知道如何解决的问题！

我使用“headset”图标，并且可以正常使用它

[rocket | Font Awesome](https://fontawesome.com/icons/headset?s=solid&f=classic)

但是当我想要使用“light headser”图标时，我根本无法使用它

[rocket | Font Awesome](https://fontawesome.com/icons/headset?s=light&f=classic)

我已经尝试过使用“fab-”、“fas-”或“far-”，也尝试过不加前缀，我已经把名字写在SVG部分了，我尝试了一切，但就是无法使用它

[image]  
同样，对于Google Play商店图标，我也无法使用，根本不行

[rocket | Font Awesome](https://fontawesome.com/icons/google-play?s=&f=brands)

为什么会这样？

---

<div class="post-metadata">

### Author: ![Jonathan5](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jonathan5/32/197134_2.png) [@Jonathan5](https://meta.discourse.org/u/Jonathan5)
#### Post date: [2022年九月7日 21:44 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/167 "2022-09-07T21:44:07Z")

</div>

可能是浅色版本是“pro”图标：

> 要使用“headset”的浅色样式，您需要订阅 Pro 级别计划或包含该图标（或样式）发布的特定版本 Font Awesome 的永久 Pro 许可证。

---

<div class="post-metadata">

### Author: ![sebastianh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sebastianh/32/40415_2.png) [@sebastianh](https://meta.discourse.org/u/sebastianh)
#### Post date: [2023年三月3日 16:22 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/169 "2023-03-03T16:22:56Z")

</div>

> [@Danielabc](#):
>
> 有没有办法添加我上传到网站的 SVG 图标？（不使用 Font Awesome 网站上的图标）

我也想知道。我想添加一个 Letterboxd 图标（在网上已经有人制作并提交给 Font Awesome，但未被接受）。

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2023年三月3日 16:27 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/170 "2023-03-03T16:27:38Z")

</div>

您可以通过主题添加自己的 SVG 图标：

> [@Replace Discourse's default SVG icons with custom icons in a theme](https://meta.discourse.org/t/replace-discourses-default-svg-icons-with-custom-icons-in-a-theme/115736):
>
> You can replace a Discourse’s default SVG icons individually or as a whole with your own custom SVG and override them [within a theme or theme component.](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966#create-new-themes-and-theme-components-7)Step 1 - Create an SVG Spritesheet To get started, you must create an SVG Spritesheet. This can contain anything from a single additional custom SVG icon up to an entire replacement set of hundreds. The spritesheet should be saved as an SVG file. In principle, you are nesting the \<svg\> tag contents from the original SVG icon file into \<symbol\> …

---

<div class="post-metadata">

### Author: ![danielabc](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@danielabc](https://meta.discourse.org/u/danielabc)
#### Post date: [2023年三月5日 23:54 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/171 "2023-03-05T23:54:30Z")

</div>

如何在网站底部（移动模式下）放置图标，使其对所有人显示相同？

例如：时间线按钮在所有不同型号的手机和移动系统上都显示在相同的位置。

现在，当我使用 CSS 将标题按钮菜单放在底部时，在某些手机上它们显示在正确的位置，在另一些手机上位置会稍微向上，在另一些手机上会稍微偏向一侧，为什么会这样？

---

<div class="post-metadata">

### Author: ![danielabc](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@danielabc](https://meta.discourse.org/u/danielabc)
#### Post date: [2023年三月6日 06:16 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/173 "2023-03-06T06:16:02Z")

</div>

还有一个疑问，有没有办法放置一个图标，当我点击这个图标时，它会像下面的例子一样打开其他带有其他图标的选项？

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

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