Just thought I’d post how I got these working with html after reading closely through the thread. (I would say in future to let everyone know in the original thread about the new system settings to get icons going on headers etc).
To add some icons go to `/admin/site_settings/category/all_results?filter=icons` and add the prefixes accordingly. “Add additional FontAwesome 5 icons that you would like to include in your assets. Use prefix ‘fa-’ for solid icons, ‘far-’ for regular icons and ‘fab-’ for brand icons.”
Eg `fa-newspaper`.
Then reference them in your html. Eg ``.
---
> [@tshenry](#):
>
> Hey @LKNickname, try this out:
>
> ```plaintext
> const { iconNode } = require("discourse-common/lib/icon-library");
> api.decorateWidget("header-icons:before", helper => {
> return helper.h("li", [
> helper.h(
> "a#globe-button.icon",
> {
> href: "https://www.website.com/",
> title: "Back to website"
> },
> iconNode("globe")
> )
> ]);
> });
>
> ```
That worked so well I’d like to add a second button. I naively tried:
```
```
But that gave a weird alignment:
How can I make the globe vertically aligned with the rest of the buttons?
---
There is a well-maintained theme component to use that is already updated to works with FA5 and that add more than 1 button before the header icons:
> [@Custom Header Links (icons)](https://meta.discourse.org/t/iconified-header-links/86307):
>
> discourse2Summary Custom Header Links (icons) will allow you to easily add linked icons to the Discourse header.eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/custom-header-links-icons)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-icon-header-links](https://github.com/discourse/discourse-icon-header-links)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Features Screenshots Desktop Mobile Settings This component includes a …
---
Can I have some help?
I have previous registered a couple of extra icons:
```
api.decorateWidget('header-icons:before', helper => {
return [
helper.h('li', [
helper.h('a#home-button.icon', {
href: '/',
title: 'McRides Home'
}, helper.h('i.fa.fa-home.home-button-icon.d-icon')),
]),
helper.h('li', [
helper.h('a#weather-button.icon', {
href: 'https://www.mcrides.co.nz/t/weather-forecast/77',
title: 'Weather Forecast'
}, helper.h('i.fa.fa-cloud.weather-button-icon.d-icon')),
])
];
});
```
I can see in this thread how I would redo this (or I’m not that skilled 🙂 probably this )
---
The theme component introduced just before will help you do it really easily
> [@Custom Header Links (icons)](https://meta.discourse.org/t/iconified-header-links/86307):
>
> discourse2Summary Custom Header Links (icons) will allow you to easily add linked icons to the Discourse header.eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/custom-header-links-icons)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-icon-header-links](https://github.com/discourse/discourse-icon-header-links)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Features Screenshots Desktop Mobile Settings This component includes a …
But if you really want to do it manually, the first post of this #howto will help
> [@(Superseded) Add new link on header beside search icon](https://meta.discourse.org/t/add-new-link-on-header-beside-search-icon/48621):
>
> mega This feature is now available as a [dedicated theme component](https://meta.discourse.org/t/iconified-header-links/86307). Want to add a new link right next to search icon on header? Follow below steps: Add this JavaScript code to your site theme Go to Admin Customize Themes Select the theme you wish to customize Edit CSS/HTML \ \