How to display font awesome icons alongside category?

[Merlls_Rizzini]

Instead of png images, I’m trying to put font awesome icons, but they look broke. Any idea how to make it work?

[tshenry (Taylor)]

Try using the following component. I just tested it and it’s working:

Category icons component

What this does? This component allows category badge links to have icons next to the category name. Here is an example of how this would look, with category style set to none: [image] Here is how this would look with category style set to box: [image] Configuration is pretty straightforward: [image] Note that this component also lets you override the category lock icon used to denote private categories. January 2020 update: thanks to @rogerco, you can now use the “partial” keyword to…

[Merlls_Rizzini]

Hey tshenry. I saw this theme component, but its display all across the forum (and just in the sub-categories), I just want to show it in the category block/list in the Categories page. The only option that Discourse has its to put a .png image.

.navigation-categories .category-text-title .category-name{
position: relative;
&:before{
    position: relative;
    font-family: "Font Awesome 5 Pro";
    content: "\f054";
    font-weight: 900;
}

This is what I’m trying, but with Font awesome icons.

Same request:

Category icons component

Another request would be having the icon next to the category name on the category page if it’s not a subcategory: [image]

[tshenry (Taylor)]

Ah ok, the CSS you posted does not work anymore.

I think best way to accomplish this would be to add a plugin outlet to the category-title-link template, and use a widget to add the appropriate icon before the category name. It makes sense to me for the Category Icons component to optionally include the category icon in the categories list. If you only want icons to display on the category list, you could hide them from the other locations with CSS.

@pmusaraj what do you think? If you think it’s a good idea, I can make a PR for the plugin outlet, then try to work out a PR for the Category Icons component that will add this functionality.

[Merlls_Rizzini]

If you only want icons to display on the category list, you could hide them from the other locations with CSS.

I can make a PR for the plugin outlet, then try to work out a PR for the Category Icons component that will add this functionality.

That would be great. @pmusaraj

[pmusaraj (Penar Musaraj)]

That sounds good to me, thanks for looking into this.

[Merlls_Rizzini]

@tshenry do you have any update on it?

[tshenry (Taylor)]

Not yet, but I should be able to work on it this week.

Edit: I have this working now on a local version of the component:

I’ll try my best to get the necessary PRs submitted tomorrow, and hopefully things will be ready sometime next week.

[tshenry (Taylor)]

This functionality is now included in the Category Icons component. For the feature to work correctly, please be sure that you are on the latest version of Discourse and the latest version of the component.