Custom Header Links (icons)

:discourse2: Summary Custom Header Links (icons) will allow you to easily add linked icons to the Discourse header.
:eyeglasses: Preview Preview on theme-creator.discourse.org
:hammer_and_wrench: Repository Link https://github.com/discourse/discourse-icon-header-links
:open_book: New to Discourse Themes? Beginnerā€™s guide to using Discourse Themes

Install this theme component

Screenshots

Desktop

Mobile

This component includes a theme setting that allows you to add as many links as you want, determine their icons, and decide which devices they show up on!

The pattern for links is as follows:

Title,Icon,URL,View,Target

Title isā€¦ wellā€¦the title you want the link to have.

URL is where you want the user to go when they click. Include protocol like https://
Alternatively, as @dnsmichi pointed out, you can also use relative links like /c/staff

Icon can be either:

  • any FontAwesome 5 (free) icon name without the fa- ā€˜fab-ā€™ ā€˜fas-ā€™ or ā€˜far-ā€™ parts
  • a URL to an image

If the icon you want to use does not show up, then add it to the svg_icons setting in the component. if you add new icons, they need to be prefixed with FontAwesome 5 prefixes like fab, far and fas.

View can have one of three values:

vdo:
Desktop only

vdm:
Mobile and desktop

vmo:
Mobile only

Target can be:

self
Opens link in the same tab

blank
Open link in a new tab

Then add the component to your theme as a theme component and youā€™re all set!

Credits

This is based on @techAPJā€™s awesome tutorial here: (Superseded) Add new link on header beside search icon

and on @vinothkannansā€™s Brand header theme which was a great reference for the structure of this component.

87 Likes

Iā€™m having a similar issue as a few people mentioned above where the icon is not showing, but I can still click the button. I made the edit to the icon setting so that it says (for instance) ā€œfab-facebook-fā€ rather than just ā€œfacebook-fā€. For Twitter and my other website, I have no issues, but for Facebook and LinkedIn, itā€™s still not working.

I figured out Facebook, but still canā€™t get LinkedIn. Also, is there any way to make a custom icon? Could I upload my companyā€™s logo and use it as an icon?

Me too ā€“ with Discord icon.

How come I donā€™t have ā€˜svg iconsā€™ section in latest version?

I have this:

That settings screenshot looks like the Custom Header Links - #84 by TheBaby5 component, which is for showing text links not icons.

I can see how the components are named in a confusing way:

  • https://github.com/discourse/discourse-header-links - icon links (this topic)
  • https://github.com/discourse/discourse-custom-header-links - text links (Custom Header Links)

Maybe you should add icon to this oneā€™s name @Johani?

4 Likes

Ah this resolved it, indeed. Yep - super confusing. Rename would rock!

EDIT: Recent update also seemed to ninja change discordā€™s class name to include fab- in between it (eg, if youā€™re wanting to change the icons color; which @OP would make a great native feat - was a bit hard to catch).

1 Like

For Linkedin you can use fab-linkedin as the icon name in this setting

setting for links

but since that icon is not included in the default set of icons that Discourse uses, you will also need to add it to the other setting in the component.

The result looks like this for me

linkedin icon

Sure, thereā€™s a section in this topic about adding custom icons.

Once you have that setup, youā€™ll be able to use any custom icons you add in this theme component. Please have a look there and let me know if you run into any issues.

Iā€™ve made that change along with a couple of other implementation improvements here

The new update adds unique prefixed classes to each link based on the title you use. So, for example if you use

facebook, fab-facebook, https://facebook.com, vdm, blank

the link will have the class

header-icon-facebook

The template is header-icon-ICON-TITLE

Which you can then target with CSS like so

.d-header-icons {
  .header-icon-facebook svg {
    fill: #4267b2;
  }

  .header-icon-twitter svg {
    fill: #1da1f2;
  }

  // add more icons here
}

which would result in something like this

colored icons

4 Likes

Thank you for your help. I tried using ā€œfab-linkedinā€ in both the ā€œHeader Linksā€ and ā€œSvg Iconsā€ categories. As seen in the picture, it is still not working for whatever reason.

Screen Shot 2020-08-05 at 9.48.15 AM

The grey circle is where the LinkedIn logo would be. Any other ideas how to fix it?

Iā€™m not entirely sure why thatā€™s not working for. Here are what my settings look like

Facebook, fab-facebook, https://facebook.com, vdm, blank
Twitter, fab-twitter, https://twitter.com, vdm, blank
LinkedIn, fab-linkedin, https://www.linkedin.com, vdm, blank

and

fab-facebook
fab-linkedin
fab-twitter

and hereā€™s what Iā€™m seeing

results

Can you please try the same for the linkedin icon and let me know if your issue presists?

1 Like

This is what I have been trying, and I have tried different icons as well. Here is how I have it currently.

Settings:

Website:

The only ones working are the ones that donā€™t use ā€œfab-ā€, which seems weird. Let me know your thoughts.

Hi Michelle,

Since you are a customer, I went in and had a look at your site and fixed the issue there for you. I updated the theme component and set the correct settings for the icons, they should all work now.

5 Likes

It looks great now, thank you!

2 Likes

One more question/ request; I initially had these links opening in a separate tab, but now they are opening in the same tab. The setting is already set to ā€œblankā€, how else can I change this?

2 Likes

This looks like a regression, weā€™ll look into it and have a fix soon.

1 Like

Indeed. I accidentally left out the target attribute in the recent changes.

No action needed on your side. I fixed the component and updated it on your site. So everything should be all set now. Thanks for reporting the issue :+1:

7 Likes

Hi,

Custom icons are on the right of the login and sign up button, and I think they would fit better on the left, as they usually are.

image

image

3 Likes

I can get some version 4.7.0 icons from Font Awesome Icons to work just by typing a name (e.g. car) in the correct part of ā€œHeader linksā€. Some icons donā€™t show (e.g. fa-comments-o). Some donā€™t need me to use ā€œSvg iconsā€ (e.g. home) and some do (e.g. car).

None of the version 5 icons which Iā€™ve tried from Font Awesome have worked. Iā€™ve put the fa- name into ā€œHeader linksā€ and ā€œSvg iconsā€ to no effect. The fab-facebook (etc) icons which were there by default do work though.

What am I doing wrong?

Edit: I edited the first paragraph for accuracy.

many thanks for this @Johani . works like a charm and gives me an ā€œaestheticalā€ solution for linking ā€œback to the siteā€ (in my case)

i did however, encounter an issue since i am also using the Left side hamburger menu on mobile component which ends up breaking everything on that part of the .d-header

any ideas on how can i make both work? would really appreciate it

I am also having an issue getting my icon to show up. Not sure what I am doing wrong. Here is what I have under settings:

This is what I end up with:

image

for the book icon, try without fas-

2 Likes