Category icons component

Yes, I think your best bet is to always set the correct prefix. The FontAwesome Pro plugin only replaces the core icons with your selected style, see this file for the list of icons’ converted:

comments is not on that list, hence it defaults to the core icon.

4 Likes

I’ve done a theme component to add the icon in the Events plugin calendar view.

It uses the category-icon widget, that do not display icon for subcategories. I’ve needed to add a “force mode” this way:

  api.createWidget("category-icon", {
    tagName: "div.category-icon-widget",
    html(attrs) {
      let iconItem = getIconItem(attrs.category.slug);
      let force_display = ('force_display' in attrs);
      if(iconItem && (!attrs.category.parent_category_id || force_display)) {
        let itemColor = iconItem[2] ? `color: ${iconItem[2]}` : "";
        let itemIcon = iconItem[1] != '' ? iconNode(iconItem[1]) : "";
        return h("span.category-icon", { "style": itemColor }, itemIcon);
      }
    }
  });

Do you see any way I can achieve the same result without this hack?
If not, would you consider add that in the code?

Thanks in advance.

2 Likes

Hi Penar, this component is causing an odd sorting problem in categories. Here are the steps to repro:

  1. Set a category to sort by Created > Descending, the category will show the sorting correctly
  2. Visit a topic in the category
  3. Click the breadcrumb to go back to the category
  4. Now the category is sorting by latest, not by created. You can refresh the page to get the correct sorting back.

It took a fair amount of sleuthing to identify this TC as the problem, very strange!

Here’s a recording of this in action,

Topic 1 was created first but has a reply
Topic 2 was created second and does not have a reply

with the Created sorting Topic 2 should be at the top of the list, which it starts out as correctly until you visit a topic and click the breadcrumb, then topic 1 is at the top of the list.

2 Likes

Thanks for the detailed report @davidkingham, very sneaky bug, I have posted a fix.

2 Likes

After the update today, i had to turn this off, it destroys my startpage and the categories, i would post screenshot there, but my forum is 21+, so @pmusaraj i will send you the screenshot on pm.

2 Likes

Thanks for the report @zooy0rk, that issue is now fixed as well.

4 Likes

The new update seems to break my whole sites UI

2 Likes

Do you have any errors in the console? What version of Discourse are you running?

1 Like

Okay, I updated to the latest 2.6.0.beta1 release and that seems to have fixed the issue

4 Likes

Hoping to get some assistance on a problem I’m having…I’m trying to use this theme component to just change the category lock icon to a star, but having mixed results.

It changes the icon for the latest topic list:

And for the categories dropdown:

But it doesn’t change the icon next to the category on the Category List homepage (/categories), it’s still a lock:

Am I missing something? I feel like I’m missing something here…

Here are the theme settings:

Any help to solve the riddle of why that lock icon remains would be awesome!! Thanks!

3 Likes

Try far-star for the icon name instead of just “star”.
“far” is for regular icons, “fab” is for brand name icons.

This a limitation of the component, it does not hook into the /categories pages. I will look into fixing this, it probably will need a change in core, first.

3 Likes

If you’re trying to change all lock icons to a star you can create a new theme component and add this to the Header section:

<script type="text/discourse-plugin" version="0.8">
      api.replaceIcon('lock', 'star');
</script>
4 Likes

Thanks @davidkingham brilliant! I thought about it and I’m happy to change all the locks to stars. And your code works a treat. Much appreciated :clap:

3 Likes

For the record, core and this component have been updated too, and the component now updates the lock icon in the /categories pages.

4 Likes

Please also consider a fix for subcategory icon display as described in Category icons component

3 Likes

@ScammerRevolts @zooy0rk Hahah, I had the same issue. So glad the issue wasn’t more serious, never would have guessed this was the cause as I had some other postgres related errors during the rebuild. :sweat_smile: Was already prepping a new instance to restore a backup to. Totally fine now once this component was updated, it was ~4 revisions behind I believe.

Safe mode was really helpful for narrowing down the issue: How to use Discourse Safe Mode

2 Likes

This is now merged @md-misko, thanks for the PR!

I also added a small fix to core to show include these icons in the Boxes with Subcategories layout for /categories.

2 Likes

I see subcategory icons when Subcategory List Style is set to Boxes with featured topics, but not when it is set to Boxes only?

1 Like

Right, the fix for that is in core, so you need to rebuild your site.

3 Likes