Iconified Header Links


(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;

(David Kingham) #21

My theme settings do not display either, I did install correctly using the importer. I’m on 1.9.7

(Joe) #22


Theme settings were introduced recently on the beta branch and require Discourse V2.0.0.beta4 or higher to work.

You’re on the stable branch which does not have support for theme settings yet.

(Joaquin) #23

Hi there wonderful community! I’ve installed the theme extension and configured my social networks OK.

They look awesome! Now I would like to customize them since they are appearing in a very dim grey.
Maybe just color them greyish white and then white for hover.
Any idea on how I could achieve this? Thanks a lot!!!

(Vincent) #24

Yo @Johani – congratulations on making the Discourse team!

I think there’s a problem on small-width mobile screens:

Looks like the category selector is hidden behind the header (note how Safari is still better at hiding bugs :smiley:)


(Joe) #25

Hi @_vincent. Thank you :tada:

I’m not sure what to recommend here. Here’s what I’m seeing without any icons added:

As you can see, the combination of a text logo alongside the French local leaves you with pretty much zero space left for any extra icons. When you add any additional icon, the elements will wrap to the next line and therefore cover the category selector.

The theme has a built-in way to choose what devices to show the links on, so that’s one option. The other option is to set an image based logo. You can specify a mobile-only logo with the mobile_logo_url setting on your site.

You can also reduce the size of the font for the text logo if you decide to stick with it but even that won’t create that much free space.

Let me know if you have any ideas.

(Vincent) #26

I think the problem lies upstream. Header should be allowed to expand in height without overlapping content, shouldn’t he?

In the meantime:

(Joe) #27

If you’re ok with the header height extending and are only concerned about the overlap, one option you can try is this:

#main-outlet {
    padding-top: 100px;

More on that here:

(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.