# 无法在 V2.2.0.beta6 中显示某些 Font Awesome 图标

**URL:** <https://meta.discourse.org/t/cant-get-certain-font-awesome-icons-to-display-in-v2-2-0-beta6/104919>\
**Category:** Support\
**Created:** [2018年十二月22日 20:01 UTC](https://meta.discourse.org/t/cant-get-certain-font-awesome-icons-to-display-in-v2-2-0-beta6/104919 "2018-12-22T20:01:35Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pttn40](https://avatars.discourse-cdn.com/v4/letter/p/13edae/32.png) [@Pttn40](https://meta.discourse.org/u/Pttn40)\
**Post date:** [2018年十二月22日 20:01 UTC](https://meta.discourse.org/t/cant-get-certain-font-awesome-icons-to-display-in-v2-2-0-beta6/104919/1 "2018-12-22T20:01:35Z")

</div>

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](https://meta.discourse.org/t/add-new-link-on-header-beside-search-icon/48621):
>
> mega This feature is now available as a [dedicated theme component](https://meta.discourse.org/t/iconified-header-links/86307). 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', [ he…

> [@Introducing Font Awesome 5 and SVG icons](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/26):
>
> 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>`

---

<div class="post-metadata">

**Author:** ![LKNickname](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lknickname/32/209114_2.png) [@LKNickname](https://meta.discourse.org/u/LKNickname)\
**Post date:** [2018年十二月23日 07:25 UTC](https://meta.discourse.org/t/cant-get-certain-font-awesome-icons-to-display-in-v2-2-0-beta6/104919/2 "2018-12-23T07:25:59Z")

</div>

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.

 ![2018-12-23%2008_24_41-Administration%20-%20Kneipentruppe%20-%20Forum](https://global.discourse-cdn.com/meta/original/3X/e/0/e0579f0997561b390f762e67edc04d2f4b4dd9bc.png)

---

<div class="post-metadata">

**Author:** ![Pttn40](https://avatars.discourse-cdn.com/v4/letter/p/13edae/32.png) [@Pttn40](https://meta.discourse.org/u/Pttn40)\
**Post date:** [2018年十二月23日 08:01 UTC](https://meta.discourse.org/t/cant-get-certain-font-awesome-icons-to-display-in-v2-2-0-beta6/104919/3 "2018-12-23T08:01:52Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)\
**Post date:** [2019年一月22日 08:08 UTC](https://meta.discourse.org/t/cant-get-certain-font-awesome-icons-to-display-in-v2-2-0-beta6/104919/4 "2019-01-22T08:08:08Z")

</div>

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