Iconified Header Links


(Joe) #1

This is a theme component that will allow you to add linked icons to the Discourse header easily.

Github repository link






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 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 any FontAwesome 5 (free) icon name without the fa- ‘fab-’ ‘fas-’ or ‘far-’ parts

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:

Desktop only

Mobile and desktop

Mobile only

Target can be:

Opens link in the same tab

Open link in a new tab

How do I install this?

follow the official theme installation guide here:

Then add the component to your theme as a theme component and you’re all set!


This is based on @techAPJ’s awesome tutorial here: 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.

How are theme setting fields created?
Navigation - Add custom menu items
Add new link on header beside search icon
Login Required activated - after successfull login it transfers you to nonexisting page
Category for Threads with zero replies?
Introducing Font Awesome 5 and SVG icons
Mingle - An Introductions Plugin
Adding a link into the mobile header
Adding a custom Link/Icon to the discourse header
Best way to customize the header
Introducing Font Awesome 5 and SVG icons
Plugin: add a menu icon (next to search)
Mobile formatting just broke
How do I install a Theme or Theme Component?
How do I install a Theme or Theme Component?
Mingle - An Introductions Plugin
How to remove iconified header links from mobile?
Generic URL for private messages?
(Hakan) #2

just show it in desktop mode, only the mobile show parts are not working well. Either it’s all working at all

(Daniel Nevoigt) #3

Very nice addon, helps a lot when some buttons have to be aplied additionally.
One question I have. Is there a way to open the links in a extra window? At the moment all links are opening in the same browser window. I have the option enabled actually in settings, to open all links on blank.

(Joe) #4

You specify which devices the links show on using this part of the string:

Check the instructions in the op and let me know if you’re still having issues.

Now there is. This is very good idea. I added the ability to decide the target of the link. Check the op for the updated instructions :sunflower:

(Daniel Nevoigt) #5

Great @Johani, thank you very much :slight_smile:

(Fellowship Forums) #6

This is a great theme. Thanks!

Although I am having slight issues.

My input is “Feedback, pencil, Comments & Feedback - Fellowship Forums - ERM, vdm, self”. I am not able to the FA icon, and it also opens in a new tab.

You can see how its working for yourself by visiting my forum: www.fellowshipforums.com

(Joe) #7

The only thing you need to change there is to remove the spaces after the commas. So instead of this:

Feedback, pencil, https://www.fellowshipforums.com/c/commentsandfeedback, vdm, self

You use this:


(Jeff Atwood) #8

Hmm, why isn’t this tolerant of spaces after a comma? It should be.

(Joe) #9

Done :tada:

White-space before or after commas is not an issue now.

(Michael Friedrich) #10

Many thanks for this nice addition :heart:

You can use relative URLs here too, which avoids long config strings and allows to change the VHost in the future. I’m a friend of having the FAQ prominently linked in the header since our community is more of Q&A with many details collected beforehand.

Modified my previous custom header to using this theme, works like a charm :+1:

(Jorge Assunção) #11

I’m on v2.0.0.beta9 and after install, with no errors, i can´t see the theme setting anywhere…

(Joe) #12

Noted, no Discourse errors while installing the theme.

Are you seeing any errors in the browser console?

(Jorge Assunção) #13

No, no errors on the console…

(Joe) #14

I would love to help here @j_assuncao

However, I just tried to install the theme on my test install v2.0.0.beta9 +73 - no plugins - and I can see the settings right away. The leads me to believe that there’s something else at play on your end, maybe.

Any further information you can provide would help.

(Jorge Assunção) #15

I´ve made a new install of discourse last night. No errors during install and still no settings…

This can be my mistake, so were are those settings suppose to be??

(Joe) #16

As soon as the theme is installed you should see the settings on the theme page like so:

And just to be sure, you’re installing the theme like this, right:

How do I install a Theme or Theme Component?

(Jorge Assunção) #17

Shame on me! I was installing the theme the wrong way. Sorry…

(Colin Marshall) #18

Thanks for the great component!

Is there a way to make it so the icons from this component always appear to the left of all the other icons? When used in conjunction with the quick messages plugin, the icons end up to the right of the quick message icon:


From an organizational standpoint, I think it makes the most sense to put the social icons to the left of all the other icons.

(Joe) #19

I believe this occurs because both the plugin and the theme are modifying the same widget, but the plugin is loaded first.

I don’t believe there’s a way to resolve this “conflict” in either the plugin or the theme, however it might be possible to do it with CSS using the order property.

Is your site public? If you share a link I can take a look.

(Colin Marshall) #20

Thanks! That was enough info for me to get a solution. I did this:

.d-header-icons {
  display: flex;
  flex-direction: row;
  // target iconified header links to come first
  li.vdm {
    order: -1;