How to display font awesome icons alongside category?

AI-generated summary

The discussion revolves around displaying Font Awesome icons alongside categories in Discourse. Merlls_Rizzini initially tries using CSS to achieve this but faces issues. tshenry suggests using a theme component, but it’s not suitable for Merlls_Rizzini’s needs as it displays icons across the forum.

tshenry proposes adding a plugin outlet to the category-title-link template and using a widget to add icons before category names. He also suggests hiding icons from other locations using CSS. pmusaraj agrees with the idea.

After some follow-up questions from [Merlls_Rizzini](/t/-/124470/5, 8), tshenry announces that he has successfully implemented the feature on a local version and plans to submit PRs. The feature is now included in the Category Icons component, and users must ensure they are on the latest version of Discourse and the component for it to work correctly tshenry.

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

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

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:

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.

That would be great. @pmusaraj

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

@tshenry do you have any update on it?

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.

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.