Cant get certain Font Awesome Icons to display in V2.2.0.beta6

[Pttn40]

On the forum I am running we modified our header to contain 2 additional buttons, one for our discord server the other for our twitter. With the V2.2.0 update and Font Awesome 5 broke the icons we where using for those buttons. We began working on updating these buttons using the information found in the following posts:

(Superseded) Add new link on header beside search icon

This feature is now available as a dedicated theme component. Want to add a new link right next to search icon on header? Follow below steps: Add this JavaScript code to your site theme Go to Admin Customize Themes Select the theme you wish to customize Edit CSS/HTML </head> <script type="text/discourse-plugin" version="0.4"> const { iconNode } = require("discourse-common/lib/icon-library"); api.decorateWidget('header-icons:before', helper => { return helper.h('li', [ …

Introducing Font Awesome 5 and SVG icons

Do you have a fix for the old “Add icon to header”-function? As of now I am using code very similar to the following within my header: api.decorateWidget('header-icons:before', helper => { return helper.h('li', [ helper.h('a#globe-button.icon', { href:'https://www.website.com/', title: 'Back to website' }, helper.h('i.fa.fa-globe.globe-button-icon.d-icon')), ]); }); Ofc the “i”-functionality is broken but since I am no dev myself I was wondering…

We where able to fix the twitter button fairly quickly, but we cant seem to get the icon we would like to display to display for the discord server. The original comments icon wont display when we set it as the icon and the discord icon itself also will not display when it is set. We are currently using the globe icon as a placeholder and to see if it was a problem with how the JS is setup or if it was an issue with loading the icons themselves.

This issue is causing us to really scratch our heads as we cant see why we can display some icons but not all of the free Font Awesome Icons. Does any know what may be causing this issue or how to fix it? Thank for your help in advance.

For reference here is some of the JS I tried myself:
Worked:

<script> Discourse._registerPluginCode('0.8.9', function (api) { const user = Discourse.User.current(); if (user !== null) { const { iconNode } = require("discourse-common/lib/icon-library"); api.decorateWidget('header-icons:before', function (helper) { return helper.h('li', [ helper.h( 'a#home-button.icon', { "href": 'REMOVED', "title": 'chat', "target": '_blank' }, iconNode('globe') )]); }); } }); </script>

Did not work:

<script> Discourse._registerPluginCode('0.8.9', function (api) { const user = Discourse.User.current(); if (user !== null) { const { iconNode } = require("discourse-common/lib/icon-library"); api.decorateWidget('header-icons:before', function (helper) { return helper.h('li', [ helper.h( 'a#home-button.icon', { "href": 'REMOVED', "title": 'chat', "target": '_blank' }, iconNode('comments') )]); }); } }); </script>

<script> Discourse._registerPluginCode('0.8.9', function (api) { const user = Discourse.User.current(); if (user !== null) { const { iconNode } = require("discourse-common/lib/icon-library"); api.decorateWidget('header-icons:before', function (helper) { return helper.h('li', [ helper.h( 'a#home-button.icon', { "href": 'REMOVED', "title": 'chat', "target": '_blank' }, iconNode('discord') )]); }); } }); </script>

<script> Discourse._registerPluginCode('0.8.9', function (api) { const user = Discourse.User.current(); if (user !== null) { const { iconNode } = require("discourse-common/lib/icon-library"); api.decorateWidget('header-icons:before', function (helper) { return helper.h('li', [ helper.h( 'a#home-button.icon', { "href": 'REMOVED', "title": 'chat', "target": '_blank' }, iconNode('arrow-circle-up') )]); }); } }); </script>

[LKNickname (Lars)]

Did you add the Icons in the new “svg icon subset”-setting?

Discourse does not load the full Font Awesome set but only the Icons it uses itself.
So if you want to use additional Icons you have to add them to the subset manually.

[Pttn40]

That was it! I remember seeing something about that but I thought it was referring to adding custom svgs or the paid Font Awesome icons. I did not realize that discourse now partial loads the icons.

Thank you again for your help!