We're upgrading our icons to Font Awesome 6!

[awesomerobot (Kris)]

What’s Font Awesome?

Discourse uses a free set of icons from Font Awesome throughout its interface. You see these on toolbars, badges, buttons, etc… here’s our composer toolbar:

Since 2018 we’ve been using Font Awesome 5 (original announcement), and in the meantime Font Awesome 6 has been released. Version 6 includes new icons, some general style updates, and renames.

As of today, Discourse will start using version 6 too! Specifically, version 6.6.0. This isn’t an enormous visual change, but you’ll notice some differences:

What does this upgrade involve?

This upgrade was a little more complicated to implement because it involves a number of renames. Font Awesome did this to make their naming conventions more consistent.

Because of the renames, changes will be rolled out in multiple phases:

---

Today - Font Awesome upgraded to v6, icons will be automatically remapped
Soon - deprecation messages will be enabled to help theme/plugin authors update their icon names
Q4 2024 - admin warning banner enabled for any remaining deprecations
Q2 2025 - removal of automatic remapping

---

What do I need to do today?

Nothing at all ! Once Discourse is updated, you’ll have the new version of the icons.

Discourse will automatically remap old icon names to new icon names, and the old icons will all be replaced. This includes icons used in the interface by default as well as badges, group/user flair, sidebar items, and additional icons added by themes and plugins.

What do theme and plugin authors need to know?

The methods covered in Introducing Font Awesome 5 and SVG icons will still work for adding new and custom icons.

We don’t want to carry the long list of remaps forever, so the old names will eventually stop working.

We want to give developers ample time to replace old icon names, so we will start showing console warnings like this soon:

If you see one of these warnings, all you need to do is update your theme or plugin with the new icon name. Later in 2024 we’ll show admins a banner drawing their attention to these warnings.

Once the admin deprecation warning is shown, you’ll have a minimum of a few months to swap in the new icon names.

At some point in Q2 2025 we will remove the remapping of the old names, and if you haven’t updated icon names by then, you’ll see blank spaces where some of your icons used to be.

There are lots of new icons!

The upgrade from version 5 to 6 introduces hundreds of new free-to-use icons, almost 500 in total!

You can browse the full set here, this is sorted to show the newest additions first — and the search is very handy: Search Icons & Find the Perfect Design | Font Awesome

[Jagster (Jakke Lehtonen)]

Is this needed anymore:

@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");

And should this be edited:

<script type="text/discourse-plugin" version="0.8">
    api.replaceIcon('d-post-share', 'share-alt');
    api.replaceIcon('d-topic-share', 'share-alt');
    api.replaceIcon("far-beer", "beer");
</script>

[ondrej]

This is great! I can finally use the Icon I want for a category

[awesomerobot (Kris)]

@Jagster

Is this needed anymore:

@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");

Looks like this might be related to Making tags look like real world tags - #11 by HeyRR… if you’re using CSS like content: "\f02b"; then yes you’ll still need this. This is using the icon font separately from our implementation (which uses SVG files directly)

@Jagster

And should this be edited:

<script type="text/discourse-plugin" version="0.8">
    api.replaceIcon('d-post-share', 'share-alt');
    api.replaceIcon('d-topic-share', 'share-alt');
    api.replaceIcon("far-beer", "beer");
</script>

This doesn’t need to be edited immediately, but based on the list of renames you should replace share-alt with share-nodes and beer with beer-mug-empty at some point within the next 6 months (the filled beer mug is a pro icon… I guess it’s not “free as in beer”)

[Jagster (Jakke Lehtonen)]

@awesomerobot

might be related to Making tags look like real world tags - #11 by HeyRR…

Perhaps. It was something that adviced more than once some years ago. I never really understood why, but I can copy&paste But it has something to do with ability to use Font Awesome somewhere, anywhere or something.

But if I can’t use beer anymore I will start a mutiny with army of moomins

[Moin]

At the moment the shield icons are missing here at Meta.

[Moin]

Fixed

[patrickemin]

Thanks, it’s not clear to me if the upgrade to version 6 has been done or will be done? (I could’nt find the “bluesky” version 6 icon after upgrading my site, it’s why I ask…)

[ondrej]

Once you update your site, your icons will be FA6 and automatically remapped by Discourse.

[patrickemin]

Yes it’s what I expected, but this icon cannot display (I use it in the header icons links component)

[ondrej]

I’ve found the icon on 6.6.0

Font Awesome

As its not a icon used in Discourse, is it in your svg icon subset in site settings?

[patrickemin]

No, I am adding it with this syntax: “fa-bluesky” in the resources of the component, but it’s not sufficient. I’ll look at that svg resources thing, I am not familiar with that.

(update), apparently we are talking about the same thing, yes it is added in the resources…

[awesomerobot (Kris)]

you might need to do fab-bluesky, because it’s part of the brand set

[patrickemin]

Thanks it works specifying fab-bluesky in the svg resources and in the custom header links editor, which I never needed to do before. In the custom header links component, I never specified the prefix “fa”, for the bluesky icon I needed to specify “fab-bluesky”. The main thing is that it works ! Thanks.

[Jagster (Jakke Lehtonen)]

@Jagster

But if I can’t use beer anymore I will start a mutiny with an army of moomins

I upgraded and icons changed. The thing that was bothering me most, because I’m a bit scared of my users (those ladies are wonderful, but if they get upset…) is what happens with reactions, but that is a different world, right? Anyway, everything went smoothly.

[darkpixlz]

Looks like a cool upgrade! I love the updated rounding. Didn’t know it was a change I wanted.

[mattdm (Matthew Miller)]

Most importantly, the new version uses the correct Fedora logo rather than an unauthorized approximation that was giving our designers aneurisms.

[bloomexperiment (Tracey)]

Will the official Category Icons and Tag Icons theme components be updated to use the new Font Awesome 6 names?

Category Icons

Summary Category Icons allows category badge links to have icons next to the category name. Preview Preview on Discourse Theme Creator 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 H…

Tag Icons

Summary Tag Icons allows tags to have an icon next to the tag label. Preview Preview on Discourse Theme Creator Repository Link https://github.com/discourse/discourse-tag-icons New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Features Here is an example of how this would look, with tag style set to the default (simple): [image] Here is how this looks with tag sty…

I think they still currently use FA5

[awesomerobot (Kris)]

These theme components use the icon system built into Discourse, so I don’t believe they’ll need an update to be compatible — they should automatically use the new icons.