Custom Header Links (icons)

[Johani (Joe)]

@MichelleBarnett

but still can’t get LinkedIn

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

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

@MichelleBarnett

Could I upload my company’s logo and use it as an icon?

Sure, there’s a section in this topic about adding custom icons.

Introducing Font Awesome 5 and SVG icons

We will shortly merge into master a branch that upgrades Discourse to Font Awesome 5.5.0 (the free version) and switches to using SVG icons instead of an icon font. This is a substantial change, with lots of benefits, and one significant change for developers. Here is a quick rundown of the changes: using SVG icons will provide crisper icons, better for accessibility and easier to customize, see this Github article for more details since the Font Awesome icon set has grown to 1300+ icons in v…

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.

@awesomerobot

Maybe you should add icon to this one’s name @Johani?

I’ve made that change along with a couple of other implementation improvements here

DEV: removes jQuery and improves implementation

@dylanh724

if you’re wanting to change the icons color

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