# Discourse FontAwesome Pro

**URL:** https://meta.discourse.org/t/discourse-fontawesome-pro/150871
**Category:** Plugin
**Tags:** official, fontawesome-pro
**Created:** [May 9, 2020, 1:53am UTC](https://meta.discourse.org/t/discourse-fontawesome-pro/150871 "2020-05-09T01:53:01Z")
**Posts on this page:** 1
**Showing post:** 1

<div class="post-metadata">

### Author: ![Discourse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/discourse/32/148734_2.png) [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [May 9, 2020, 1:53am UTC](https://meta.discourse.org/t/discourse-fontawesome-pro/150871/1 "2020-05-09T01:53:01Z")

</div>

| | | |
| --- | --- | --- |
| :discourse2: | **Summary** | **Discourse FontAwesome Pro** allows the use of Font Awesome Pro icons in Discourse with a [FontAwesome license](https://fontawesome.com/plans) by using your account’s NPM package token. |
| 🛠 | **Repository Link** | [https://github.com/discourse/discourse-fontawesome-pro](https://github.com/discourse/discourse-fontawesome-pro) |
| 📖 | **Install Guide** | [How to install plugins in Discourse](https://meta.discourse.org/t/install-plugins-in-discourse/19157) |

> [@](#):
>
> :discourse2: As this is an #official plugin maintained by the Discourse team, #Support, #Contribute > Bug, #Contribute > UX, and #Contribute > Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate plugin tag. Click on a link below to get one started. 👍
> 
> [❓&nbsp; **Support**](https://meta.discourse.org/new-topic?category_id=6&body=%3E%20Before%20asking,%20did%20you%20search%20first%3F%20Press%20%F0%9F%94%8D%20at%20the%20upper%20right%20to%20search.&tags=fontawesome-pro "Ask for support on configuring and using Discourse FontAwesome Pro") [🐛&nbsp; **Bug**](https://meta.discourse.org/new-topic?category_id=1&tags=fontawesome-pro "A bug report means something is broken, preventing normal/typical use of the plugin") [👀&nbsp; **UX**](https://meta.discourse.org/new-topic?category_id=9&tags=fontawesome-pro "Discussion about the user interface of Discourse FontAwesome Pro, and how features are presented (including language and UI elements)") [💡&nbsp; **Feature**](https://meta.discourse.org/new-topic?category_id=2&tags=fontawesome-pro "Discussion about how existing Discourse FontAwesome Pro features can be improved or enhanced, and how proposed new features could work")

### Configuration

This requires a few extra step to enable from a normal plugin:

First, you will need to set up an additional env var containing your font awesome pro package token (note this is different from your API token): `DISCOURSE_FONTAWESOME_AUTH_TOKEN`

The install script also needs to be called during initialization, as an additional “after\_code” hook. This downloads and adds the FontAwesome Pro SVGs on build using your auth token. This is an additional block separate from the plugin clone block.

Here is an example install in `app.yml` :

```plaintext
env:
  DISCOURSE_FONTAWESOME_AUTH_TOKEN: 123456
  
hooks:
  after_code:
    - exec:
        cd: $home/plugins
        cmd:
          - git clone https://github.com/discourse/discourse-fontawesome-pro.git
    - exec:
        cd: $home/plugins/discourse-fontawesome-pro
        raise_on_fail: false
        cmd:
          - $home/plugins/discourse-fontawesome-pro/scripts/install.sh

```

* * *

## Picking an override family:

In the admin settings, you can override the default Discourse icon family:

 ![imagen](https://global.discourse-cdn.com/meta/original/4X/c/e/7/ce723ed6a150229f520b97a36de3704db9bef8d8.png)

## Picking an override style:

You can also override the default icon style:

 ![imagen](https://global.discourse-cdn.com/meta/original/4X/7/7/0/770e6c40bbe75a5c1c3fcc277975da876d25bf24.png)

## Duotone

To take full control of duotone support, you will be looking to override the following CSS (in a theme, or otherwise) and replace it with your own color scheme:

```plaintext
svg {
  --fa-secondary-color: red;
  --fa-secondary-opacity: 0.6;
}

```

To color individual icons reference the SVG’s ID:

```plaintext
#fad-search .fa-secondary {
  --fa-secondary-color: red;
  --fa-secondary-opacity: 0.6;
}

```

> ⚠ Duotone Styling Update  
> If you’re using class-based selectors like:
> 
> ```plaintext
> .fa-secondary { color: red; }
> 
> ```
> 
> You’ll need to update your styling to use **CSS custom properties** instead. Class-based color overrides no longer work since they were [dropped in Font Awesome v7](https://fontawesome.com/changelog)

* * *

Under the hood, this is using [FontAwesome’s repository](https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers) to install fonts to the plugin’s SVG folder, and lets Discourse pick up the sprites from there.

> :discourse2: **Hosted by us?** This plugin is available on our Enterprise plans.

> Last edited by @awesomerobot 2026-08-27T14:55:12Z
> 
> > **Check document**
> >
> > Perform check on document:

---

_[View the full topic](https://meta.discourse.org/t/discourse-fontawesome-pro/150871)._