Category Icons

[AnkitJain (Vihaani)]

what does “icon” stand for in settings?

Is it exact name of some icon from svg site? How do I get the exact name?

[Globulle]

@oca

it could be adjusted to work with the Event Plugin calendar

That could indeed be a great improvement!

[Lure (Luka Renko)]

I think I have a problem on my forum as the icons are specified as white, while background is white on categories page

Could I enforce different background here, as it is used for subcategories?

[md-misko]

I’m looking at the code and trying to fix the following two issues, but I’m stuck on the second one.

Category icon list is not applied in category view (with Show subcategory list above topics in this category)

I managed to fix this one by replacing line 112 in header.html

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

with

      if (iconItem) {

and adding the following code to common.scss

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

Category lock icon next to category doesn’t change to new svg

Categories view:

Category view (with Show subcategory list above topics in this category):

I think this is the relevant code:

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

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

which adds restricted class to a <span> with classes badge-category clear-badge which controls the subcategory lock icon display, but I cannot figure out how to also apply this to <div> with class category-text-title which controls category lock icon display.

Please help @pmusaraj @tshenry

[rogerco]

@pmusaraj

Note: this does not work for the “Boxes with Subcategories” layout (yet).

Any chance that it will anytime soon? For some reason the categories boxes view also doesn’t display the colour blob or the lock icon so it might be outside this component’s control…

[Gjithcka_al (Artur.B)]

I’m still not able to “figure out” what is wrong with the color,
Someone can help me where I was wrong?

and the result

[rogerco]

Bug @pmusaraj
Sub-Category slugs (and titles) only have to be unique within their parent category

But slugs are used as the key to find the icon in this component.

Thus if you have two subcategories under different parents that have the same slug the icon is applied to both of them.

To be honest I think this is actually a Discourse problem as slugs should be unique across the whole discourse instance, but they are not.

Is it even possible to fix this within the component?

[Remah (Just another happy Discourse user)]

@rogerco

I think this is actually a Discourse problem as slugs should be unique across the whole discourse instance, but they are not.

I don’t understand why the slugs need to be globally unique when, AFAIK, they never have a global scope. Can you explain?

P.S. I see your new topic which asks the question why they aren’t unique.

Subcategory names unique rules?

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…

[rogerco]

The Category Icons Component for example uses the slug to identify the category to which the icon has to be attached.
How is an admin or user to uniquely identify a subcateogry? - do they have to use the path parentcategory-subcategory? (or parent-child-grandchild when that enhancement gets released). This seems a bit cumbersome.

[pmusaraj (Penar Musaraj)]

It is likely possible to have the component deduplicate subcategories with the same slug under different parents but it would require some way to pass the parent category slug in the component’s settings. IMO it would not be too elegant.

Can you try changing the slug for one of the two categories that have the same slug? Is there a reason you can’t do that (just the slug needs to change, not the category name)?

[rogerco]

@pmusaraj

changing the slug for one of the two categories that have the same slug?

Yep, that seems to be the way to go given that sub-category slugs in different parent categories do not not have to be unique.

Having said that, it can actually be turned to advantage as a feature. For example if you have group based categories many of which have a help and announcement forums as subcategories then you can easily set up a common help icon for all the help categories and a common icon for all announcement categories using just two entries. And any new subcategories with the help tag would pick up the icon automatically.

For our use I have taken this one stage further and actually made it an option for a partial match on the slug so that an entry “help,question-mark,#000080,false” would match “sw-help” and “help-forum” and “helpdesk”.

The “false” additional item on the end of the entry tells it not to enforce an exact match.

I also have the option to specify the colour as “catcol” in which case the icon will pick up the category colour instead of using a separate specified one.

Two suggestions for inclusion in an update for you.

[pmusaraj (Penar Musaraj)]

@rogerco

For our use I have taken this one stage further and actually made it an option for a partial match on the slug so that an entry “help,question-mark,#000080,false” would match “sw-help” and “help-forum” and “helpdesk”.

I think the component used a partial match at some point, and it was confusing to some users who wanted an icon for “book” but not for “booking”. But with the option to turn this on/off per setting, this would be nice. (Maybe you could use partial-match instead of false as the last item, would be easier to understand.)

@rogerco

I also have the option to specify the colour as “catcol” in which case the icon will pick up the category colour instead of using a separate specified one.

That’s a nice addition.

I would be happy to review a PR for either of these features. Thanks!

[pmusaraj (Penar Musaraj)]

https://github.com/pmusaraj/discourse-category-icons/pull/5 has been merged, thanks @rogerco!

[rogerco]

I’ve come up against a minor issue for the category colour option if the settings are using bullet or boxes rather than bars - I only created it for the bars option in the settings and it falls back to grey in the other options. Fixable largely in css I think but haven’t cracked it yet - I will!

[jord8on (Jordan)]

Thanks for this great theme @pmusaraj!

I would like to use the COMMENTS icon but am not a huge fan of the solid version. When I use comments I get the solid version. The solid version is typically served up as “fas fa-comments”
What if I would like to use is the regular version which is typically served up as “far fa-comments”

Out of the following variations, there are some that require the paid subscription. Is there a way to select different variations or is the solid version the only one available?

[jord8on (Jordan)]

I added to my theme, as follows:

• $icons-sprite: icons8-chat.svg

how do I now add this to the theme settings? Here’s what I tried to do…

[pmusaraj (Penar Musaraj)]

@jord8on

What if I would like to use is the regular version which is typically served up as “ far fa-comments ”

Use “far-comments” in both settings, like this:

@jord8on

Out of the following variations, there are some that require the paid subscription. Is there a way to select different variations or is the solid version the only one available?

The paid versions aren’t publicly available so we can’t include them in Discourse. If their license permits, you can add them in a custom SVG sprite in your theme. Full instructions for that are in the Introducing Font Awesome 5 and SVG icons, read carefully the section “Adding custom icons”.

[jord8on (Jordan)]

Thank you for the help with this! Adding far-comments to both areas worked perfectly!

Can you take a quick look at this other question I asked (in response to another one of your comments in this topic)…

Category Icons

I added to my theme, as follows: $icons-sprite: icons8-chat.svg how do I now add this to the theme settings? Here’s what I tried to do… [image]

[Heliosurge (Dan DeMontmorency)]

Hi awesome theme component! I am having trouble adding font awesome or uploads using icons-sprite upload. Can only get question-circle to display. What am I doing wrong? Do I need to add css coding?

Pics below

And

Font awesome names always says not found and create? Have tried direct name and prefix ie bullhorn or fa-bullhorn

Update have font awesome working. Found svg icon in settings to add however it is not using colour setting as with question-circle.

Would like to use custom svg icons but need a noob how to.

[pmusaraj (Penar Musaraj)]

Looking at the site on your profile, I see icons for categories, so maybe you solved this already? If not, from the screenshot above, I think you need to make sure the SVG file in icons-sprite is an SVG sprite file (not an individual icon). More details in Replace Discourse's default SVG icons with custom icons in a theme