Category Icons

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

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

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

What is the state of this? I’d love to move beyond fontawesome.

3 Likes

It hasn’t been merged, but you’re free to install the repository and use my branch in the meanwhile. :no_mouth:

2 Likes

Thanks! I’ll wait until the new menu work for our site is done, and then try it in staging. :slight_smile:

2 Likes

Does anyone know when this will happen so as not to use this component in a new project?
image

1 Like

I would just use the component. In Moving to a Single Category Style Site Setting there were questions about category icons and this does not sound like they will become part of core untill the release of Discourse 3.2.

4 Likes

Yes, to confirm I’ve just merged an update to this component to make it compatible with Moving to a Single Category Style Site Setting

The update will be available for sites on version Discourse 3.2.0.beta4-dev or later, thanks to Pinning plugin and theme versions for older Discourse installs (.discourse-compatibility)

Since this is pinned to a version rather than a specific commit… if you’re already on Discourse 3.2.0.beta4-dev and are experiencing issues with this component, you may need to update Discourse again today.

3 Likes

I never did get a chance to try your branch, but hope to come back to this. Any more news on whether this will become official?

1 Like

@carson Got a chance to play with this a bit. Looks basically good, except:

  1. Icons in category-select drop-down are not in color
  2. Doesn’t work in the new menu
  3. If you enable “Use the category’s uploaded logo as its icon”:
    a. it only affects the category-select drop-down
    b. not shown by the category itself
    c. and also if this is on, the category-select drop-drop down only shows these icons
  4. Icons seem larger than they were in the previous theme. Maybe it would be nice to have a setting?

Also, some nice-to-haves:

  • option to hide the category lock icon, not just set it to some other thing[1]
  • If category logo is used, option to hide the big category logo on the categories page?

  1. I find it adds a lot of visual noise and not a lot of value because it doesn’t tell you how the category is restricted ↩︎

2 Likes