# 分类图标

**URL:** <https://meta.discourse.org/t/category-icons/104683>\
**Category:** Theme component\
**Tags:** official, deprecated, category-icons\
**Created:** [2018年十二月19日 16:22 UTC](https://meta.discourse.org/t/category-icons/104683 "2018-12-19T16:22:44Z")\
**Posts on this page:** 20\
**Page:** 3

<div class="post-metadata">

**Author:** ![AnkitJain](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ankitjain/32/158153_2.png) [@AnkitJain](https://meta.discourse.org/u/AnkitJain)\
**Post date:** [2019年十月4日 12:16 UTC](https://meta.discourse.org/t/category-icons/104683/47 "2019-10-04T12:16:35Z")

</div>

在设置中，“icon”代表什么？

它是某个 SVG 网站上的图标确切名称吗？如何获取确切的名称？

---

<div class="post-metadata">

**Author:** ![Globulle](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/globulle/32/98005_2.png) [@Globulle](https://meta.discourse.org/u/Globulle)\
**Post date:** [2019年十月10日 14:32 UTC](https://meta.discourse.org/t/category-icons/104683/48 "2019-10-10T14:32:25Z")

</div>

> [@oca](#):
>
> 它可以进行调整以配合事件插件日历使用

这确实可能是一个很好的改进！

---

<div class="post-metadata">

**Author:** ![Lure](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lure/32/130462_2.png) [@Lure](https://meta.discourse.org/u/Lure)\
**Post date:** [2019年十月10日 18:16 UTC](https://meta.discourse.org/t/category-icons/104683/49 "2019-10-10T18:16:00Z")

</div>

我觉得我的论坛（[https://pojalabanda.com/categories）有个问题：图标被设置为白色，而分类页面的背景也是白色。](https://pojalabanda.com/categories%EF%BC%89%E6%9C%89%E4%B8%AA%E9%97%AE%E9%A2%98%EF%BC%9A%E5%9B%BE%E6%A0%87%E8%A2%AB%E8%AE%BE%E7%BD%AE%E4%B8%BA%E7%99%BD%E8%89%B2%EF%BC%8C%E8%80%8C%E5%88%86%E7%B1%BB%E9%A1%B5%E9%9D%A2%E7%9A%84%E8%83%8C%E6%99%AF%E4%B9%9F%E6%98%AF%E7%99%BD%E8%89%B2%E3%80%82)

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

能否在这里强制使用不同的背景，因为该页面用于子分类？

---

<div class="post-metadata">

**Author:** ![md-misko](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/md-misko/32/126315_2.png) [@md-misko](https://meta.discourse.org/u/md-misko)\
**Post date:** [2019年十一月4日 17:35 UTC](https://meta.discourse.org/t/category-icons/104683/50 "2019-11-04T17:35:08Z")

</div>

我正在查看代码并尝试修复以下两个问题，但卡在了第二个问题上。

### `类别图标列表` 未在类别视图中应用（在“在此类别的主题上方显示子类别列表”开启时）

 ![subcategory-view-missing-category-icon](https://global.discourse-cdn.com/meta/original/3X/9/4/9437ccb9db1e8cc24876d1fcc4363a711ad3c5b7.png)

我通过修改 `header.html` 第 112 行解决了这个问题：

```jscript
      if(iconItem && !attrs.category.parent_category_id) {

```

改为：

```jscript
      if (iconItem) {

```

并在 `common.scss` 中添加了以下代码：

```css
.subcategory .category-icon-widget {
  display: none;
}

```

 ![subcategory-view-missing-category-icon-fixed](https://global.discourse-cdn.com/meta/original/3X/c/3/c33a4285797ca4ce94c36816f8d0f7f53d4da43b.png)

### 类别旁边的 `类别锁定图标` 未更改为新的 SVG

类别视图：

 ![category-view-lock-icon](https://global.discourse-cdn.com/meta/original/3X/e/3/e36cb94bdb4b2775742fe9e11b0755a4fa4c0302.png)

类别视图（开启“在此类别的主题上方显示子类别列表”）：

 ![subcategory-view-lock-icon](https://global.discourse-cdn.com/meta/original/3X/2/e/2ef3cb8b88db5e371f6cb3c6cbb7e2ce4108f629.png)

我认为相关代码如下：

```jscript
    let classNames = "badge-category clear-badge";
    if (restricted) {
      classNames += " restricted";
    }
    
...

    html +=
      `<span ${style} ` +
      'data-drop-close="true" class="' +
      classNames +
      '"' +
      (description ? 'title="' + escapeExpression(description) + '" ' : "") +
      ">";

```

这段代码将 `restricted` 类添加到了具有 `badge-category clear-badge` 类的 `<span>` 元素上，从而控制子类别锁定图标的显示。但我无法确定如何也将此类应用到控制类别锁定图标显示的、具有 `category-text-title` 类的 `<div>` 元素上。

请帮忙 @pmusaraj @tshenry

---

<div class="post-metadata">

**Author:** ![rogerco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rogerco/32/161338_2.png) [@rogerco](https://meta.discourse.org/u/rogerco)\
**Post date:** [2019年十二月24日 15:34 UTC](https://meta.discourse.org/t/category-icons/104683/51 "2019-12-24T15:34:10Z")

</div>

> [@pmusaraj](#):
>
> 注意：此功能目前尚不支持“带子分类的方框”布局。

近期有实现的可能性吗？出于某种原因，“分类方框”视图也无法显示彩色圆点或锁定图标，因此这可能超出了该组件的控制范围……

---

<div class="post-metadata">

**Author:** ![Gjithcka\_al](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gjithcka_al/32/179076_2.png) [@Gjithcka\_al](https://meta.discourse.org/u/Gjithcka_al)\
**Post date:** [2020年一月7日 15:24 UTC](https://meta.discourse.org/t/category-icons/104683/52 "2020-01-07T15:24:25Z")

</div>

我仍然无法“弄清楚”颜色哪里出了问题，  
有人能帮我看看我哪里做错了吗？

 ![Screenshot 2020-01-07 at 16.19.21](https://global.discourse-cdn.com/meta/original/3X/7/6/76141fc807fe806328f91a4564e61fd768860a48.png)

以及结果

 ![Screenshot 2020-01-07 at 16.25.04](https://global.discourse-cdn.com/meta/original/3X/e/5/e51f1dc69fbc05898865dcf1ec29d2da681b0552.png)

---

<div class="post-metadata">

**Author:** ![rogerco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rogerco/32/161338_2.png) [@rogerco](https://meta.discourse.org/u/rogerco)\
**Post date:** [2020年一月10日 22:01 UTC](https://meta.discourse.org/t/category-icons/104683/53 "2020-01-10T22:01:19Z")

</div>

错误 @pmusaraj  
子类别的 slug（和标题）只需在其父类别内保持唯一即可

但 slug 在此组件中被用作查找图标的键。

因此，如果两个不同父类别下的子类别具有相同的 slug，图标将被同时应用到这两个子类别上。

说实话，我认为这实际上是 Discourse 本身的问题，因为 slug 在整个 Discourse 实例中应当是唯一的，但目前并非如此。

在组件内部是否有可能修复这个问题？

---

<div class="post-metadata">

**Author:** ![Remah](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/remah/32/70590_2.png) [@Remah](https://meta.discourse.org/u/Remah)\
**Post date:** [2020年一月10日 23:20 UTC](https://meta.discourse.org/t/category-icons/104683/54 "2020-01-10T23:20:47Z")

</div>

> [@rogerco](#):
>
> 我认为这实际上是 Discourse 的问题，因为 slugs 应该在 Discourse 实例范围内全局唯一，但它们并非如此。

我不明白为什么 slugs 需要全局唯一，因为据我所知，它们从未具有全局作用域。你能解释一下吗？

附：我看到了你新发的主题，其中询问了为什么它们不唯一。

> [@Subcategory names unique rules?](https://meta.discourse.org/t/subcategory-names-unique-rules/138278?u=remah):
>
> It seems that subcategory titles and slugs only have to be unique within their parent category. It is possible for subcategories in different categories to have the same slug (and title) Is this a good idea? Is there a separate categoryID that we don’t see anywhere that is used as a key field? I can understand that it is useful to have the same title for a subcategory in different places (for example many categories might have a “Help” category, but shouldn’t the slug at least be unique (perh…

---

<div class="post-metadata">

**Author:** ![rogerco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rogerco/32/161338_2.png) [@rogerco](https://meta.discourse.org/u/rogerco)\
**Post date:** [2020年一月10日 23:25 UTC](https://meta.discourse.org/t/category-icons/104683/55 "2020-01-10T23:25:37Z")

</div>

例如，类别图标组件使用 slug 来识别需要附加图标的类别。  
管理员或用户如何唯一标识子类别？他们是否必须使用路径 parentcategory-subcategory？（或者在相关功能发布后使用 parent-child-grandchild）。这似乎有些繁琐。

---

<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年一月13日 01:09 UTC](https://meta.discourse.org/t/category-icons/104683/56 "2020-01-13T01:09:08Z")

</div>

组件很可能可以处理在不同父级下具有相同 slug 的子类别去重问题，但这需要在组件设置中传入父类别 slug 的机制。依我看，这样做不够优雅。

你能尝试更改两个具有相同 slug 的类别中其中一个的 slug 吗？是否有理由无法这样做（只需更改 slug，无需更改类别名称）？

---

<div class="post-metadata">

**Author:** ![rogerco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rogerco/32/161338_2.png) [@rogerco](https://meta.discourse.org/u/rogerco)\
**Post date:** [2020年一月13日 10:44 UTC](https://meta.discourse.org/t/category-icons/104683/57 "2020-01-13T10:44:56Z")

</div>

> [@pmusaraj](#):
>
> 修改两个具有相同 slug 的分类之一的 slug？

是的，鉴于不同父分类下的子分类 slug 无需唯一，这似乎是可行的方案。

话虽如此，这实际上可以作为一个功能加以利用。例如，如果您拥有基于组别的分类，其中许多分类都包含“帮助”和“公告”子论坛，那么您只需两条条目，即可为所有“帮助”分类设置统一的帮助图标，并为所有“公告”分类设置统一图标。任何带有“帮助”标签的新子分类都会自动应用该图标。

针对我们的使用场景，我进一步将其扩展，使其支持对 slug 进行部分匹配。例如，条目“help,question-mark,#000080,false”将匹配“sw-help”、“help-forum”和“helpdesk”。

条目末尾的“false”附加项表示不强制要求完全匹配。

此外，我还提供了将颜色指定为“catcol”的选项，此时图标将自动采用分类颜色，而非使用单独指定的颜色。

这是供您参考的两个更新建议。

---

<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年一月13日 14:25 UTC](https://meta.discourse.org/t/category-icons/104683/58 "2020-01-13T14:25:11Z")

</div>

> [@rogerco](#):
>
> 为了满足我们的使用需求，我将其进一步推进，实际将其设置为支持对 slug 进行部分匹配。例如，条目“help,question-mark,#000080,false”将匹配“sw-help”、“help-forum”和“helpdesk”。

我认为该组件在某个阶段曾使用过部分匹配，但这让一些用户感到困惑，例如他们想要“book”的图标，却不想要“booking”的图标。不过，如果能按设置提供开关选项，这将会非常实用。（或许你可以将最后一项的 `false` 改为 `partial-match`，这样会更易于理解。）

> [@rogerco](#):
>
> 我还增加了一个选项，可以将颜色指定为“catcol”，这样图标将自动采用分类颜色，而不是使用单独指定的颜色。

这是一个很棒的改进。

我很乐意审查针对这两个功能中任意一个的 PR。谢谢！

---

<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年一月14日 14:18 UTC](https://meta.discourse.org/t/category-icons/104683/59 "2020-01-14T14:18:06Z")

</div>

[Allow slug partial-match option by rogercreagh · Pull Request #5 · discourse/discourse-category-icons · GitHub](https://github.com/pmusaraj/discourse-category-icons/pull/5) 已合并，感谢 @rogerco！

---

<div class="post-metadata">

**Author:** ![rogerco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rogerco/32/161338_2.png) [@rogerco](https://meta.discourse.org/u/rogerco)\
**Post date:** [2020年一月14日 23:24 UTC](https://meta.discourse.org/t/category-icons/104683/60 "2020-01-14T23:24:02Z")

</div>

我在类别颜色选项上遇到了一个小问题：如果设置中使用的是项目符号或方框而不是条形图，该选项就会失效——我最初只为条形图选项创建了它，在其他选项中会回退为灰色。我认为这主要可以通过 CSS 修复，但尚未找到解决方案——我一定能搞定！

---

<div class="post-metadata">

**Author:** ![jord8on](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jord8on/32/166809_2.png) [@jord8on](https://meta.discourse.org/u/jord8on)\
**Post date:** [2020年一月15日 14:35 UTC](https://meta.discourse.org/t/category-icons/104683/61 "2020-01-15T14:35:12Z")

</div>

感谢这个很棒的主题 @pmusaraj！🙌

我想使用 COMMENTS 图标，但不太喜欢实心版本。当我使用 `comments` 时，得到的是实心版本。通常， **实心** 版本会以“`fas fa-comments`”的形式提供。

如果我想使用通常以“`far fa-comments`”形式提供的 **常规** 版本，该怎么办？

在以下变体中，有些需要付费订阅。有没有办法选择不同的变体，还是说只有 **实心** 版本可用？

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

---

<div class="post-metadata">

**Author:** ![jord8on](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jord8on/32/166809_2.png) [@jord8on](https://meta.discourse.org/u/jord8on)\
**Post date:** [2020年一月15日 15:00 UTC](https://meta.discourse.org/t/category-icons/104683/62 "2020-01-15T15:00:02Z")

</div>

我已按如下方式添加到我的主题：

> - $icons-sprite: [icons8-chat.svg](https://forums.pickleballist.com/uploads/default/original/1X/19b9e85bf1bdb90094c97b6c92bd37bdcb1fb4c0.svg)

现在我该如何将其添加到主题设置中？这是我尝试的操作…

 ![image](https://global.discourse-cdn.com/meta/original/3X/b/c/bc5060ed8e558ed5cc8c374fe3408f2a5bae5e59.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:** [2020年一月15日 16:10 UTC](https://meta.discourse.org/t/category-icons/104683/63 "2020-01-15T16:10:24Z")

</div>

> [@jord8on](#):
>
> 如果我想使用的是通常显示为“ `far fa-comments` ”的 **常规** 版本，该怎么办？

在两个设置中都使用“far-comments”，如下所示：

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

> [@jord8on](#):
>
> 在以下变体中，有些需要付费订阅。有没有办法选择不同的变体，还是只有 **实心** 版本可用？

付费版本未公开提供，因此我们无法将其包含在 Discourse 中。如果其许可证允许，您可以在主题的自定义 SVG 精灵中添加它们。相关完整说明请参阅 [介绍 Font Awesome 5 和 SVG 图标](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643)，请仔细阅读“添加自定义图标”部分。

---

<div class="post-metadata">

**Author:** ![jord8on](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jord8on/32/166809_2.png) [@jord8on](https://meta.discourse.org/u/jord8on)\
**Post date:** [2020年一月15日 17:01 UTC](https://meta.discourse.org/t/category-icons/104683/64 "2020-01-15T17:01:49Z")

</div>

感谢您对此提供的帮助！在两个区域都添加 `far-comments` 后效果完美！

能否请您快速看一下我提出的另一个问题（这是对您在此话题中另一条评论的回复）…

> [@Category Icons](https://meta.discourse.org/t/category-icons-component/104683/62?u=jord8on):
>
> I added to my theme, as follows: $icons-sprite: [icons8-chat.svg](https://forums.pickleballist.com/uploads/default/original/1X/19b9e85bf1bdb90094c97b6c92bd37bdcb1fb4c0.svg) how do I now add this to the theme settings? Here’s what I tried to do…

---

<div class="post-metadata">

**Author:** ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)\
**Post date:** [2020年三月4日 16:39 UTC](https://meta.discourse.org/t/category-icons/104683/65 "2020-03-04T16:39:29Z")

</div>

你好，非常棒的主题组件！我在尝试添加 Font Awesome 图标或使用图标精灵上传时遇到了问题，目前只能显示 question-circle。请问我哪里做错了？是否需要添加 CSS 代码？

截图如下

 ![Screenshot_20200304-123629](https://global.discourse-cdn.com/meta/original/3X/c/d/cdbcef527d14e7d5c67055394406a555b65af5c5.png)

以及

 ![Screenshot_20200304-123557](https://global.discourse-cdn.com/meta/original/3X/0/e/0ec40f82cd44af38b9aaf7e632d19cd85920e780.png)

Font Awesome 名称总是提示“未找到”并建议创建？我尝试过直接使用名称和带前缀的名称，例如 bullhorn 或 fa-bullhorn。

**更新** ：Font Awesome 已能正常工作。我在设置中找到了添加 SVG 图标的选项，但它没有像 question-circle 那样应用颜色设置。

我希望使用自定义 SVG 图标，但需要新手指南，请问该如何操作？

---

<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年三月10日 13:32 UTC](https://meta.discourse.org/t/category-icons/104683/66 "2020-03-10T13:32:04Z")

</div>

查看您个人资料中的网站，我看到有分类图标，所以也许您已经解决了这个问题？如果没有，根据上面的截图，我认为您需要确保 `icons-sprite` 中的 SVG 文件是一个 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)

[上一頁](https://meta.discourse.org/t/category-icons/104683.md?page=2)

[下一頁](https://meta.discourse.org/t/category-icons/104683.md?page=4)