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

Summary Category Icons allows category badge links to have icons next to the category name. Repository Link https://github.com/discourse/discourse-category-icons New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Features This theme component is used alongside the Category Badge Styles theme component Here is an example of how this would look, with category bad…

[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

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]

@tshenry

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

@tshenry

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.