Category Icons

That’s excellent — I’m looking forward to it. Hopefully this will also resolve my long-standing sadness about category color configuration, too. :slight_smile:

2 Likes

Nothing shows up I followed all instructions but nothing

1 Like

Have you used theme components before? Do you have it configured for your current theme?

2 Likes

Yes like the Discord one that is the only one that work for me

1 Like

I did some renaming here but I was not able to get an icon for this one category.

It is not really an important issue, but it is strange. And I ran out of ideas here. :wink:

1 Like

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.)

8 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

This and the tag icon components seem incompatible with the latest update to the fontawesome pro plugin to support v6. All my pro icons are no longer showing. Could you please verify that this is the case?

1 Like

Hey David - I’ve just pushed a pushed a branch to the fontawesome pro plugin to use the older icon sets – cloning that plugin with --branch fa5 should allow you to use the FA5 icon sets, until the fa6 set can be better supported here.

6 Likes

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

1 Like

Hi! Is there any update news? It’s very interesting what happened

5 Likes

It would be great if the category icons worked also in the lefthand sidebar:
image

10 Likes

I did some modifications on my fork to add support in the sidebar.
I’m not sure this is entirely okay this way, so posting here for now. I would gladly create a PR on the official repo if valid.

To test, install a new component from https://github.com/Arkshine/discourse-category-icons and provide the branch feature/sidebar-support (click on the Advanced button)

Note: you will have to fill in your settings again. Don’t forget to disable the official one.


NVIDIA_Share_VWbgRM1UEt

8 Likes

Wow, that’s awesome, thank you!

2 Likes