类别图标

[Discourse]

此主题组件已弃用，不应再使用。其功能现已整合到 Discourse 核心中（参见：将热门功能引入 Discourse）。
如需自定义私有分类图标，请参阅 此主题。

	摘要	分类图标 允许在分类名称旁显示分类徽章链接的图标。
	预览	在 Discourse 主题创建器中预览
	仓库链接	https://github.com/discourse/discourse-category-icons
	初次使用 Discourse 主题？	Discourse 主题使用入门指南

安装此主题组件

由于这是一个由 Discourse 团队维护的 official 主题组件，#support、#bug、ux 和 #feature 请求可以在 Meta 的相应分类中提出，并打上适当的主题组件标签。点击下方的链接即可开始创建话题。

 支持  错误  用户体验  功能

功能

此主题组件需与 Category Badge Styles 主题组件配合使用

以下是将 category badge style 设置为 none 时的效果示例：

以下是将 category badge style 设置为 box 时的效果示例：

配置非常简单：

请注意，此组件还允许您覆盖用于表示私有分类的 category lock icon。

另请参阅 标签图标 组件（该组件对标签实现相同功能）。

设置

名称	描述
category icon list	分类及其对应图标的列表
svg icons	添加默认未包含的额外图标
category lock icon	用于替换“分类锁图标”的图标

• 要为分类添加图标，请按以下格式用逗号分隔输入详细信息：“slug,icon,color,match”
• 颜色格式为 #123456，或使用 “categoryColor” 以采用分类的默认颜色（与徽章颜色相同）
• 如果 match 为 “partial”，则 slug 只需部分匹配分类 slug；否则需要完全匹配。

已知问题

• 当与 bullet 分类样式一起使用时，无法正确尊重图标颜色。不过，通常不建议与 bullet 或 bar 分类样式一起使用，因为界面会变得过于杂乱。

开发历史

感谢 @rogerco 添加了 “partial” 关键字以部分匹配分类 slug（例如，输入 “book,icon,red,partial” 将匹配所有包含 “book” 的分类 slug）。

由我们托管？ 主题组件可在我们的标准版、商业版和企业版计划中使用。

[kontratak (Emre)]

This component has had an impact on our forum in an artistic way. I like it.

However there is a problem with category names. I created a category with the name of “Doğa Bilimleri”, but later changed its name to “Bilim” and created a sub-category with the name of “Doğa Bilimleri”.

Before:

After:

I only assigned an icon for the category of “Doğa Bilimleri”, not for “Bilim”.

But the flask icon has been assigned for both “Bilim” and its sub-category “Doğa Bilimleri”.

I cannot also assign an icon to a category whose name I change if I use the new name of it, yet the old name always works. (I solved this one: This is all about “category slug”. If you leave the category slug with the old name, you will experience same pseudo-problem.)

Edit: I figured out why the flask icon is assigned for the main category. It is because both the main category and the sub-category include same word “Bilim”. Even if I give a random name like “abcdefbilimghjk” in the category icon list, it will still assign the icon I choose to the category “Bilim”, since the random name includes the word “bilim”.

[pmusaraj (Penar Musaraj)]

Hi Emre, thanks for the report, I’ve now fixed the issue with loose matching of slugs. If you update the theme, it should be resolved, “abcdefbilimghjk” will no longer apply the icon to the “bilim” slug.

[kontratak (Emre)]

It’s been perfectly resolved. Thanks for the update

[ScammerRevolts]

This is an awesome component! Works great on my site! ty for doing this !

[pihentagy]

Can I use this icon as “js”?

Only bash has the icon, the others has an emty space.

What do I miss?

[zogstrip]

Have a look here to learn how to use new font awesome icons

Introducing Font Awesome 5 and SVG icons

We will shortly merge into master a branch that upgrades Discourse to Font Awesome 5.5.0 (the free version) and switches to using SVG icons instead of an icon font. This is a substantial change, with lots of benefits, and one significant change for developers. Here is a quick rundown of the changes: using SVG icons will provide crisper icons, better for accessibility and easier to customize, see this Github article for more details since the Font Awesome icon set has grown to 1300+ icons in v…

[pihentagy]

Thanks, but how that breaks down to using this component as a plugin user?

Should I wait for something to merge to master before I can use the plugin?

Or did I misunderstand the method to define how can I specify my font awesome icons?

[pmusaraj (Penar Musaraj)]

Use fab-js instead of js in both fields since it’s a brand icon and FA groups brand icons separately.

Same for the Java icon, though you should be on tests-passed for that to work, because the Java icon was added to FontAwesome recently.

[cursed_mask (Piyush Singh)]

Can this component be extended to support custom made svg icons?

[pmusaraj (Penar Musaraj)]

Custom SVG icons are already supported in plugins, see Introducing Font Awesome 5 and SVG icons for details. Custom SVG icon support in themes is in the works.

[cursed_mask (Piyush Singh)]

Thank you for quick response. I will look into it.

[Lure (Luka Renko)]

First, a big thank you to @pmusaraj for making this great theme-component.

I have configured it on my site, but have two issues:

There seems to be no way I can “attach” any icon to Jadran category
I have tried with various icons, even the ones that are working on other categories with no success.

Configuration is the same as for other categories:

It seems that pull-downs in category view, does not respect the icon color (white).
Here it looks the worst - gray on gray.

Elsewhere, white color is respected:

[Lure (Luka Renko)]

I have an idea, why “Jadran” does not work: I have another category “Jadranje”, which includes first name. I would expect that slug would be checked with exact match (everything between /), right?

[pmusaraj (Penar Musaraj)]

In the URL you posted https://pojalabanda.com/c/potovanja/jadran, I see the icon next to Jadran.

I do see the style issue, it’s something that’s been recently introduced, I’ll look for a solution.

[Lure (Luka Renko)]

@pmusaraj

In the URL you posted https://pojalabanda.com/c/potovanja/jadran , I see the icon next to Jadran.

Yes, I got idea for workaround: have replaced the order of “rules” in the config, so that longer name is after shorter:

It works now!

Thanks for checking the problem and for confirming style issue.

[Lure (Luka Renko)]

Is there a possibility to upload own svg icon and then use it as category icon? I tried to upload it on Category icons upload, but not sure how should I reference it?

Or am I completely on wrong track here?

[pmusaraj (Penar Musaraj)]

It’s slightly different, you need to upload an svg sprite. See this:

@pmusaraj

Adding custom icons

If you would like to have more icons than what’s available in FontAwesome, you can add your own SVG icons in a plugin or a theme.

[pmusaraj (Penar Musaraj)]

I have pushed a fix for the style issue in core: UX: Inherit badge icon color · discourse/discourse@8d098df · GitHub

Once this passes tests, you need to rebuild your app, icon colors should then respect the badge color.

[davidkingham]

Do you have any plans to extend this to the sub-category boxes Penar? Would be awesome to have them everywhere. My site looks great with all these icons now, appreciate this!