Iconified Header Links


(Joe) #28

Hi @bongotai

The icons generated by this component will follow the style of the rest of the icons in the header. The default way to control the color of those icons is to change the header_primary color in your color scheme:

if you’d like to go beyond that, you’d need to use CSS to get the results you need. You can use something like this:

.d-header-icons .icon {
    color: #999999; // icon color

  &:hover {
    color: white; // icon color when hovered

(@SenpaiMass) #29

how do we use Fontawesome 5.1.0 with this ?

(Joe) #30

Updating to FontAwesome (FA) v5 is planned for future #releases. Until then, this theme will only work with the current version of FA included in Discourse (4.7) unless you modify it.

I recommend waiting, but if you must, then change line #15 in the </head> section from this:

helper.h("i.fa.fa-" + seg[1] + ".d-icon.d-icon-" + seg[1])

to this:

helper.h("i.d-icon" + seg[1])

You would then be able to add CSS selectors in the theme settings that support FA 5.1

So FA 4.7 twitter link would look like this:

Twitter, twitter, https://twitter.com, vdo, blank

The same link modified for FA v5 would need to be:

Twitter, .fab.fa-twitter, https://twitter.com, vdo, blank

All your links will obviously need to be updated as well. You cannot use both v4.7 and v5.1 at the same time in this theme.


Something even more challenging … is there any way to include a D3.js based ‘gauge’ in the header? Obviously it would rely on linking the D3 library … is that legal?

(Andy Kopp) #32

Thanks just added the icons to my forum. I also did the mistake of having spaces at first. Now it works.

(Tyler S.) #33

Hey guys and gals, new to discourse, but have managed to have it up and running almost a month now with zero problems thanks to these forums! But I am having an issue with one signle icon “discord”. I am able to load up FB, Twitch and a custom no problem, but for whatever reason the Discord icon just refuses to load. There is an empty place where the icon should be and an active link but no icon.

I have tried the following combinations of the icon link:


Any suggestions?


Does anyone know what CDN version this theme addon is using for font awesome? Other people experiencing the same issues where still using version 4. I am wondering how to determine what version this is currently using and if it is possible to upgrade it to version 5 if it’s not already on it.

(Tyler S.) #34

Does anyone have a solution to this issue?

(Jeff Atwood) #35

Yes, the answer is already what you stated: we’re using Font Awesome 4. We are executing a broad switch to SVG based glyph rendering (instead of font icons) but this will take months, it’s quite difficult.

(Arnold Schrijver) #36

Would it be possible to add a rel="me" attribute to the generated links, as an option. If the icon refers to social media channels, then this helps to verify the authenticity of the link.

Unfortunately the Mastodon icon is not yet in current FontAwesome, but there the rel attribute causes a nice green checkbox to be shown on the Mastodon profile.

See also: rel="me" · Microformats Wiki

(Vincent) #37

Hi @Johani! I think the component broke due to core changes:


I tested it since this update, it works, you need to upgrade the theme componant, and add the icons you want to use in the Svg icons setting of the theme componant



(Kamid) #39

First of all thanks for the great component for the discourse :slight_smile:

Furthermore, I was a bit struggling with this one as it didn’t show the icons first. The issue was:


If you type the second word Instagram with a capital letter - the icon won’t appear :slight_smile: That took me around an hour to figure this out :slight_smile: So again: The word for the icon has to be typed in with small letters, otherwise the icon won’t appear on your site.

(Joe) #40

Thanks for reporting the issue @tello80 :+1:

I pushed a small fix and letter case for icons should not matter now

(Erik Molenaar) #41

Thanks for this awesome component @Johani. My home button looks great:


I noticed none of the header button or icons show up on a 404. Example: https://forum.networklessons.com/does_not_exist


Is this a bug in Discourse?


@Johani is is possible to have different sets of visibility for the iconified header links? For example:

  • iconified header links visible only to anonymous users
  • iconified header links visible only to logged in users
  • iconified header links visible to everyone

Use case:

  • add “Anonymous Icon” header link … which should be visible only for the logged in users.

Is it possible to add “Anonymous Icon” action to iconified header links at all? According to Help! with the Anonymous feature on discourse it is a java action.

Thank you for your help!

(Mike) #43

I try ading the fa-blog icon but it does not appear.
I tried fas.fa-blog, fa-blog, blog etc. nothing is working.

(Penar Musaraj) #44

That looks like a recent addition to FontAwesome. It will shortly be available in Discourse, I will update our FontAwesome dependency in the coming week.

(Penar Musaraj) #45

FontAwesome has been updated to the latest version (5.7.2), and the blog icon is now available for use @MikesCafe.

(Alfarhan Zahedi) #46

Is there any way I can use a custom icon (not included in Font Awesome) with this component ?

(Penar Musaraj) #47

Yes, as of this commit, you can now add custom icons to your theme or theme component. See the “adding custom icons” section of Introducing Font Awesome 5 and SVG icons.