# 标签图标

**URL:** <https://meta.discourse.org/t/tag-icons/109757>\
**Category:** Theme component\
**Tags:** official, tag-icons\
**Created:** [2019年二月21日 13:56 UTC](https://meta.discourse.org/t/tag-icons/109757 "2019-02-21T13:56:48Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)\
**Post date:** [2020年十一月30日 15:04 UTC](https://meta.discourse.org/t/tag-icons/109757/61 "2020-11-30T15:04:47Z")

</div>

> [@renato](#):
>
> 如果我理解正确，在标签渲染器中并没有一种简单的方法来查找标签所属的分组？

是的，这正是标签分组存在的问题。

> [@renato](#):
>
> 所以这可能需要对核心代码进行修改？

是的，我刚刚查看了一下，这似乎是一个相当简单的修复方案。核心代码需要在筛选下拉菜单中使用标签渲染器（这样就能与编辑器中的标签选择器保持一致）。我稍后会着手处理。

---

<div class="post-metadata">

**Author:** ![renato](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/renato/32/383632_2.png) [@renato](https://meta.discourse.org/u/renato)\
**Post date:** [2020年十二月1日 20:04 UTC](https://meta.discourse.org/t/tag-icons/109757/62 "2020-12-01T20:04:48Z")

</div>

我刚刚注意到，当在编辑器中使用 `#提及` 时，下拉菜单中显示的类别渲染器也被替换了，它显示了主题组件中的类别图标。但标签渲染器在所有其他位置使用的渲染器不同，它在标签名称旁边显示一个标签图标：

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

@pmusaraj 您认为是否可以让这个渲染器也使用被主题组件替换的那个渲染器呢？

谢谢。

---

<div class="post-metadata">

**Author:** ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)\
**Post date:** [2020年十二月1日 21:03 UTC](https://meta.discourse.org/t/tag-icons/109757/63 "2020-12-01T21:03:13Z")

</div>

我认为对此进行标准化是有意义的，是的。@renato，你有兴趣为此提交一个 PR 吗？

（顺便一提，针对筛选下拉菜单的 [PR 已提交](https://github.com/discourse/discourse/pull/11378)，预计下周某个时间合并。）

---

<div class="post-metadata">

**Author:** ![sunjam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sunjam/32/175682_2.png) [@sunjam](https://meta.discourse.org/u/sunjam)\
**Post date:** [2020年十二月30日 17:17 UTC](https://meta.discourse.org/t/tag-icons/109757/64 "2020-12-30T17:17:31Z")

</div>

我已开始使用此组件，在应用会触发聊天集成的标签时[向用户发出视觉提醒](https://meta.discourse.org/t/adding-a-confirmation-to-particular-tag-groups-and-mentions/174213)。

是否有可能直接通过该组件可选地为标签文本着色？我在论坛[这里](https://meta.discourse.org/t/add-a-custom-fontawesome-icon-and-color-to-your-tag/67881/3)看到了一个手动选项。感谢提供这么棒的组件！

编辑：此外，为标签添加多个图标也会很有用。感谢考虑！

---

<div class="post-metadata">

**Author:** ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)\
**Post date:** [2020年十二月30日 21:06 UTC](https://meta.discourse.org/t/tag-icons/109757/65 "2020-12-30T21:06:20Z")

</div>

> [@sunjam](#):
>
> 是否有可能从此组件直接可选地为标签文本着色？

这可以通过您主题中的 SCSS 实现，我们暂无计划将此功能添加到该组件中。

同样，我们也没有计划允许每个标签使用多个图标。

---

<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:** [2021年一月30日 18:55 UTC](https://meta.discourse.org/t/tag-icons/109757/66 "2021-01-30T18:55:55Z")

</div>

嘿 @pmusaraj，目前有没有针对每个标签组设置备用图标的变通方法？

---

<div class="post-metadata">

**Author:** ![Ed\_Bobkov](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ed_bobkov/32/200014_2.png) [@Ed\_Bobkov](https://meta.discourse.org/u/Ed_Bobkov)\
**Post date:** [2021年一月31日 16:29 UTC](https://meta.discourse.org/t/tag-icons/109757/67 "2021-01-31T16:29:49Z")

</div>

是否可以为所有标签更改图标？能否将项目符号替换为其他内容？如果我没理解错的话，这个组件仅适用于列表中的标签。

已找到答案：

```plaintext
.discourse-tags .bullet:before { 
    background: transparent;
    content: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optimizeQuality;" viewBox="0 0 467 856.25" x="0px" y="0px" fill-rule="evenodd" clip-rule="evenodd"><defs><style type="text/css">.fil0 {fill:black}</style></defs><g><path class="fil0" d="M234 0c129,0 233,105 233,234 0,64 -26,122 -68,165l-165 286 -166 -286c-42,-43 -68,-101 -68,-165 0,-129 105,-234 234,-234zm0 125c50,0 90,40 90,90 0,50 -40,91 -90,91 -50,0 -91,-41 -91,-91 0,-50 41,-90 91,-90z"/></g></svg>'); 
    vertical-align:baseline;
}

```

SVG 图标图像可以从 [https://thenounproject.com/](https://thenounproject.com/) 等网站自由下载。

---

<div class="post-metadata">

**Author:** ![TheBestPessimist](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thebestpessimist/32/247704_2.png) [@TheBestPessimist](https://meta.discourse.org/u/TheBestPessimist)\
**Post date:** [2021年二月15日 11:13 UTC](https://meta.discourse.org/t/tag-icons/109757/68 "2021-02-15T11:13:40Z")

</div>

### 项目符号标签 + 标签颜色

如果您使用的是项目符号样式的标签，并且：

- 希望 _标签图标_ 和 _标签文本_ 的颜色保持一致
- 希望仅在未设置 _标签图标_ 时显示项目符号

以下是我为 `books` 和 `science-fiction` 标签实现此效果的方法：

最终效果：

 ![image](https://global.discourse-cdn.com/meta/original/3X/0/d/0dbe1c95fb6f31b0a2d7d721eb97cdec04be193b.png)

1. `Tag icons` 组件（本组件）的设置

 ![image](https://global.discourse-cdn.com/meta/original/3X/9/7/97bd661b9737393c4710883d131c61d6335ded2d.png)

1. 设置一个必须与 `Tag Icons` 保持同步的辅助组件  
在此组件中，我们执行两项操作：
  1. 隐藏特定标签的项目符号
  2. 将标签文本颜色设置为与图标相同的颜色

为此，我们创建一个新的主题组件：`Tag Icons extra`。  
在 `Common/CSS` 部分：

1. 添加以下混入（只需添加一次）：

```css
@mixin updateBulletTag ($col) {
    &.bullet {
        color: $col !important;
    }
    &.bullet::before {
        content: none !important;
    }
}

```

1. 对于每个需要编辑的标签，粘贴以下代码，并将 `REPLACEMETAG` 替换为标签名称，将 `REPLACEMECOLOR` 替换为与图标相同的颜色：

```css
[data-tag-name="REPLACEMETAG"] {
    @include updateBulletTag(REPLACEMECOLOR);
}

```

 ![image](https://global.discourse-cdn.com/meta/original/3X/e/f/efbeae227166f9f0c1162da992c9a9c1ff5070e1.png)

---

<div class="post-metadata">

**Author:** ![TheBestPessimist](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thebestpessimist/32/247704_2.png) [@TheBestPessimist](https://meta.discourse.org/u/TheBestPessimist)\
**Post date:** [2021年二月15日 11:16 UTC](https://meta.discourse.org/t/tag-icons/109757/69 "2021-02-15T11:16:01Z")

</div>

错误报告：在帖子的标签选择器中，图标没有颜色：

在此处，图标的颜色应与文本颜色一致（文本颜色是我自定义的 CSS）：

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

我的配置：

 ![image](https://global.discourse-cdn.com/meta/original/3X/5/b/5ba4cabf2377c537b5067437e1eb269380a7d7b6.png)

---

<div class="post-metadata">

**Author:** ![MrDavis97](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mrdavis97/32/206391_2.png) [@MrDavis97](https://meta.discourse.org/u/MrDavis97)\
**Post date:** [2021年三月9日 23:48 UTC](https://meta.discourse.org/t/tag-icons/109757/83 "2021-03-09T23:48:22Z")

</div>

@pmusaraj 我大约两周前为 50 个左右的标签添加了图标。现在查看标签列表，发现其中五个标签的图标不见了……即使我删除它们并重新添加，问题依旧。我或许可以尝试删除全部 50 个标签再重新逐一添加，看看是否有效，但真不希望非得这么做，毕竟太麻烦了……

---

<div class="post-metadata">

**Author:** ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)\
**Post date:** [2021年三月10日 00:43 UTC](https://meta.discourse.org/t/tag-icons/109757/84 "2021-03-10T00:43:41Z")

</div>

能否截一张你的设置界面，并标出那些图标无法显示的标签？

---

<div class="post-metadata">

**Author:** ![MrDavis97](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mrdavis97/32/206391_2.png) [@MrDavis97](https://meta.discourse.org/u/MrDavis97)\
**Post date:** [2021年三月10日 00:54 UTC](https://meta.discourse.org/t/tag-icons/109757/85 "2021-03-10T00:54:34Z")

</div>

![tags_1](https://global.discourse-cdn.com/meta/original/3X/b/e/be742afde5001a38cf909618387ead6d2f53347a.jpeg)

 ![tags_2](https://global.discourse-cdn.com/meta/original/3X/5/d/5de4302eb2d59c3cfbd694414fc604c848835b10.jpeg)

---

<div class="post-metadata">

**Author:** ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)\
**Post date:** [2021年三月10日 03:46 UTC](https://meta.discourse.org/t/tag-icons/109757/86 "2021-03-10T03:46:53Z")

</div>

嗯，奇怪的是最后五个条目无法正常工作。你能尝试将最后五个中的一个与上面的另一个交换，看看会发生什么吗？看起来设置值在某个地方被截断了……

---

<div class="post-metadata">

**Author:** ![MrDavis97](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mrdavis97/32/206391_2.png) [@MrDavis97](https://meta.discourse.org/u/MrDavis97)\
**Post date:** [2021年三月10日 08:19 UTC](https://meta.discourse.org/t/tag-icons/109757/88 "2021-03-10T08:19:33Z")

</div>

说明一下，最初并非最后五个条目无法显示，而是五个看似随机的条目。随后我删除了它们并重新输入，以检查它们是否能显示（结果仍然不能）。因此，它们看起来像是最后几个条目才无法显示。

话虽如此，我已删除了“proof-verification”标签并重新输入，使其排在队列最前端。该标签原本为橙色，现在仍为橙色且显示正常。目前看来，问题似乎仍只涉及那五个条目……

---

<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:** [2021年五月25日 20:14 UTC](https://meta.discourse.org/t/tag-icons/109757/97 "2021-05-25T20:14:52Z")

</div>

是否可以使用这些颜色变量来设置标签图标的颜色？

> [@Use Discourse Core Variables in your Theme](https://meta.discourse.org/t/how-to-use-discourse-core-variables-in-your-theme/77551):
>
> Discourse is incredibly customizable! The goal of this topic is to show you how make use of all the amazing options that are available to you as a theme developer. You know… so that you don’t have to reinvent the wheel smileVariables? What variables? Variables cover a large number of things, from font sizes to colors to z-index values. You can use and override the vast majority of variables in your theme editor. Colors There are many colors available for you to use or override in your them…

---

<div class="post-metadata">

**Author:** ![daemon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/daemon/32/256632_2.png) [@daemon](https://meta.discourse.org/u/daemon)\
**Post date:** [2021年五月25日 20:16 UTC](https://meta.discourse.org/t/tag-icons/109757/98 "2021-05-25T20:16:54Z")

</div>

您可以为标签图标使用任意颜色。  
 ![tagicons](https://global.discourse-cdn.com/meta/original/3X/0/3/036042efa898fb891942266b5dc7de6a38f979cf.png)  
或者您的意思是什么？

---

<div class="post-metadata">

**Author:** ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)\
**Post date:** [2021年五月25日 20:21 UTC](https://meta.discourse.org/t/tag-icons/109757/99 "2021-05-25T20:21:48Z")

</div>

好问题，是的，看起来你可以使用 CSS 自定义属性，这个对我有效：

 ![image](https://global.discourse-cdn.com/meta/original/3X/e/6/e6755224302dee077951166e9dd051be1b1ee94a.png)

---

<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:** [2021年五月25日 20:24 UTC](https://meta.discourse.org/t/tag-icons/109757/100 "2021-05-25T20:24:37Z")

</div>

啊，我的错。刚发现错误，现在运行正常了。太棒了，竟然可以这样！

---

<div class="post-metadata">

**Author:** ![DogeRTX](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dogertx/32/222185_2.png) [@DogeRTX](https://meta.discourse.org/u/DogeRTX)\
**Post date:** [2021年五月27日 22:43 UTC](https://meta.discourse.org/t/tag-icons/109757/102 "2021-05-27T22:43:59Z")

</div>

有没有办法使用 PNG 作为图标？我所有的图片都想要以 PNG 格式使用，将它们转换为 SVG 只会破坏它们的质量，而且即使转换了，图标也无法加载。

我有 400 多张图片需要转换，既然连一次转换都无法成功，如果能直接使用现有的 PNG 文件就好了。

---

<div class="post-metadata">

**Author:** ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)\
**Post date:** [2021年五月27日 22:55 UTC](https://meta.discourse.org/t/tag-icons/109757/103 "2021-05-27T22:55:14Z")

</div>

此组件并非用于处理 PNG 图像。在您的情况下，可能只需使用 CSS 即可。

[上一頁](https://meta.discourse.org/t/tag-icons/109757.md?page=1)

[下一頁](https://meta.discourse.org/t/tag-icons/109757.md?page=3)