Category Icons

Actually, I checked this again and that assessment of the problem doesn’t seem to be accurate. It seems like any slugs that have some of the same words as another will not work despite not using partial.

If I’m already using these slugs:

midi
deprecated

Then I can’t use:

midi-deprecated
midideprecated
mideprecated
deprecated-midi

somehow it won’t distinguish it as a different slug I guess

in the end, I had to use: abcd

2 Likes

Hello. Can I make category icons on colored round background like nodebb? This makes the icons look prettier

2 Likes

Yes that should be doable using some CSS.

3 Likes

Hi. Can you add a category style setting to make it look like this?

3 posts were split to a new topic: How are these category images added?

A post was split to a new topic: Add category lock icons in the sidebar

It probably has been brought up before, but we can’t change a category color when the category style is none anymore, this notice is rendered instead:

You can’t select colors because you have a category style of none.

Currently, we need to change the style to something else, change the color, and reset the style to none.

On another subject, I assume we still need core changes to be able to replace categories and tag icons in the sidebar to follow what’s set in these theme components, right?

3 Likes

Yep. Here’s the bug topic about this, with some discussion:

3 Likes

2 posts were merged into an existing topic: Add category icons in the sidebar

5 posts were split to a new topic: Icons work for all but one category

5 posts were split to a new topic: Icons not displaying

I’ve made 3 additions I’ve really wanted to see.

Feature 1 — Category logo as category icon

Simply upload the SVG or PNG in the category settings under Category settings > Images > Category Logo Image. No need to mess with a custom sprite sheet!

Settings

I second this, it would be extremely nice to have everything configurable from the respective category pages themselves. I think this feature may be the next closest thing, if you’re okay with using the category logo as the category icon.


Additionally, you’re now able to use 2 types of emojis!

Feature 2 — Native system emoji as category icon

Simply use the native emoji keyboard on your iOS, macOS, or other device to input a single Unicode emoji character.

Settings


Feature 3 — Discourse emoji as category icon (+ pro tip!)

Use Discourse’s hosted emoji set! Simply type the emoji shorthand such as :grinning: which will render → :grinning:

Pro tip

If you want to upload a custom category icon without replacing the category logo, this is a great solution. Simply upload the icon as an emoji under Admin > Customize > Emoji. Then, use the emoji’s :shorthand:.

Settings


Native emojis, Discourse emojis, and Font Awesome icons can all be hodgepodge’d as well, if that’s how you roll…

Settings


While developing this, I had some questions @pmusaraj

Can we potentially remove the partial option altogether and replace the category slug with the category id to solve the issue of subcategories sharing the same slug? If I wanted different icons for subcategories that shared the same slug, this would also be a solution. Because ids are more unique they seem like the logical approach and less prone to breakage (unless they delete a category I assume, but does doing that reassign every category id?).

Also, is the svg-icons setting still necessary? (The Font Awesome icons will still render without specifying them there.)

9 Likes

It would be great to be able to choose the color of the round background of the icon as in nodebb. Icons would have better visibility

2 Likes

Thanks for the suggestion! I checked it out and that’s actually pretty cool, I think there can be an option where a circular background can be enabled pulling from the category color. Reminds me of Apple’s profile picture options.


It seems like it would be a more streamlined solution to remove the existing color option for Font Awesome icons and just pull its color from the category color setting. As mentioned above there can also be an inverse solution where the Font Awesome icon is white over a circular background that is the category color. This would eliminate unnecessary complexity and allow for a cohesive design.

6 Likes

The color of the category is visual noise. Nodebb does not use category colors, but uses category icons and the categories look great
image

1 Like

I believe there are people using the partial option because they want the same icon for subcategories. A switch to category ids would also require all existing users of this theme component to reconfigure it following their next update, and that would be quite disruptive.

This is also tricky. It still is useful if you pick an FA icon that is not included in the default Discourse set (i.e. an icon that isn’t visible in the styleguide of your site). There is a general site setting for that as well, but like with the partial configuration, I suspect there are existing consumers of that setting, so removing it would cause some icons to go missing on some Discourse sites.

3 Likes

To do this, you need to have the “inherit icon from parent category” setting by default.
Thus, the reconfiguration would be easy and would not take much time. Many things can be inherited by default.
Choose your own icon from ready-made ones or upload it manually (maybe even with the conversion to svg from an image on the online) give endless options for using icons to improve the usability of the community.

1 Like

I can’t see any of that stuff in the TC. Are they future plans? Or something that you are currently working on?

I love the concept! It will really take this TC to the next level.

2 Likes

This update has not yet been merged, it only exists as a separate branch in the repository at the moment. I will submit a PR soon by next week to merge it without breaking any existing configurations. Thank you for your kind feedback! :smiley:

5 Likes

If you install bbcode plugin you can I believe use bbcode color as an option. Similarly there is smoji.

1 Like