Summary | Custom Header Links (icons) will allow you to easily add linked icons to the Discourse header. | |
Preview | Preview on theme-creator.discourse.org | |
Repository Link | https://github.com/discourse/discourse-icon-header-links | |
New to Discourse Themes? | Beginner’s guide to using Discourse Themes |
Install this theme component
Screenshots
Desktop
Mobile
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,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:
- any FontAwesome 5 (free) icon name without the
fa-
‘fab-’ ‘fas-’ or ‘far-’ parts - a URL to an image
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.