How to display font awesome icons alongside category?

Icons%20quebrados

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

1 Like

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

5 Likes

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.

3 Likes

That would be great. @pmusaraj

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

5 Likes

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

3 Likes