# How to display font awesome icons alongside category?

**URL:** https://meta.discourse.org/t/how-to-display-font-awesome-icons-alongside-category/124470
**Category:** Support
**Created:** [July 31, 2019, 1:02am UTC](https://meta.discourse.org/t/how-to-display-font-awesome-icons-alongside-category/124470 "2019-07-31T01:02:37Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![Merlls\_Rizzini](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merlls_rizzini/32/125604_2.png) [@Merlls\_Rizzini](https://meta.discourse.org/u/Merlls_Rizzini)
#### Post date: [July 31, 2019, 1:02am UTC](https://meta.discourse.org/t/how-to-display-font-awesome-icons-alongside-category/124470/1 "2019-07-31T01:02:37Z")

</div>

![Icons%20quebrados](https://global.discourse-cdn.com/meta/original/3X/8/9/89ede660f13b38957092c54a60a8402e3b83a546.png)

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

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [July 31, 2019, 1:22am UTC](https://meta.discourse.org/t/how-to-display-font-awesome-icons-alongside-category/124470/2 "2019-07-31T01:22:25Z")

</div>

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

> [@Category Icons](https://meta.discourse.org/t/category-icons-component/104683):
>
> warning This theme component is deprecated and should no longer be used. Its features are now in Discourse Core (see: [Bringing popular features to Discourse](https://meta.discourse.org/t/bringing-popular-features-to-discourse-header-search-welcome-banner-and-category-icons-emoji/359169)). For private category icon customization, refer to [this topic](https://meta.discourse.org/t/new-aliases-for-replacing-lock-icons-on-closed-topics-and-restricted-categories/373778). discourse2Summary Category Icons allows category badge links to have icons next to the category name.eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/category-icons)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-category-icons](https://github.com/discourse/discourse-category-icons) …

---

<div class="post-metadata">

### Author: ![Merlls\_Rizzini](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merlls_rizzini/32/125604_2.png) [@Merlls\_Rizzini](https://meta.discourse.org/u/Merlls_Rizzini)
#### Post date: [July 31, 2019, 2:02am UTC](https://meta.discourse.org/t/how-to-display-font-awesome-icons-alongside-category/124470/3 "2019-07-31T02:02:39Z")

</div>

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.

[![](https://global.discourse-cdn.com/meta/original/3X/1/d/1dc2cc596f1867eb6818ae8059910e865f12eef9.jpeg) ](https://global.discourse-cdn.com/meta/original/3X/1/d/1dc2cc596f1867eb6818ae8059910e865f12eef9.jpeg)

Same request:

> [@Category Icons](https://meta.discourse.org/t/category-icons-component/104683/23):
>
> Another request would be having the icon next to the category name on the category page if it’s not a subcategory:

 ![](https://global.discourse-cdn.com/meta/original/3X/7/a/7ae7adee4a263e578cce229d93fc0d416ffe9ec7.png)

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [July 31, 2019, 9:50am UTC](https://meta.discourse.org/t/how-to-display-font-awesome-icons-alongside-category/124470/4 "2019-07-31T09:50:05Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Merlls\_Rizzini](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merlls_rizzini/32/125604_2.png) [@Merlls\_Rizzini](https://meta.discourse.org/u/Merlls_Rizzini)
#### Post date: [July 31, 2019, 7:42pm UTC](https://meta.discourse.org/t/how-to-display-font-awesome-icons-alongside-category/124470/5 "2019-07-31T19:42:48Z")

</div>

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

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [August 1, 2019, 2:03am UTC](https://meta.discourse.org/t/how-to-display-font-awesome-icons-alongside-category/124470/6 "2019-08-01T02:03:41Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Merlls\_Rizzini](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merlls_rizzini/32/125604_2.png) [@Merlls\_Rizzini](https://meta.discourse.org/u/Merlls_Rizzini)
#### Post date: [August 6, 2019, 12:25am UTC](https://meta.discourse.org/t/how-to-display-font-awesome-icons-alongside-category/124470/8 "2019-08-06T00:25:21Z")

</div>

@tshenry do you have any update on it?

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [August 6, 2019, 2:44am UTC](https://meta.discourse.org/t/how-to-display-font-awesome-icons-alongside-category/124470/9 "2019-08-06T02:44:23Z")

</div>

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:

 ![53%20PM](https://global.discourse-cdn.com/meta/original/3X/7/c/7c65a319379a7b7ee760ba5692bdad4c11beaa7b.png)

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

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [August 20, 2019, 7:47am UTC](https://meta.discourse.org/t/how-to-display-font-awesome-icons-alongside-category/124470/10 "2019-08-20T07:47:54Z")

</div>

This functionality is now included in the [Category Icons component](https://meta.discourse.org/t/category-icons-component/104683). 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**.

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [August 21, 2019, 7:47am UTC](https://meta.discourse.org/t/how-to-display-font-awesome-icons-alongside-category/124470/11 "2019-08-21T07:47:54Z")

</div>

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.
