Category Icons

[pmusaraj (Penar Musaraj)]

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:

https://github.com/discourse/discourse-fontawesome-pro/blob/master/assets/javascripts/initializers/replacements.js

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

[oca]

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.

[davidkingham]

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.

[pmusaraj (Penar Musaraj)]

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

[zooy0rk (York)]

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.

[pmusaraj (Penar Musaraj)]

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

[ScammerRevolts]

The new update seems to break my whole sites UI

[pmusaraj (Penar Musaraj)]

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

[ScammerRevolts]

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

[Michael_Fearne]

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!

[JimPas]

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

[pmusaraj (Penar Musaraj)]

@Michael_Fearne

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

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.

[davidkingham]

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>

[Michael_Fearne]

@davidkingham

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

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

[pmusaraj (Penar Musaraj)]

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

[md-misko]

https://github.com/discourse/discourse-category-icons/pull/6

Please also consider a fix for subcategory icon display as described in Category icons component - #50 by md-misko

[markersocial]

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

[pmusaraj (Penar Musaraj)]

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.

[md-misko]

@pmusaraj

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

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

[pmusaraj (Penar Musaraj)]

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