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 Discourse Theme Creator
: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

Features

Screenshots

Desktop

Mobile

Settings

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!

Name Descriptions
Header links Comma delimited in this order: title, icon, URL, view, target
add whitespace If checked, this will add some whitespace between the default Discourse header icons and the custom icons added via this component
Svg icons Include FontAwesome 5 icon classes for each icon used in the list.

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:

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.


:discourse2: Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @JammyDodger 2024-06-11T21:18:37Z

Check documentPerform check on document:
87 Likes