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

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:


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>

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.

3 Likes

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!

2 Likes

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