 |
Summary | Custom Header Links (icons) will allow you to easily add linked icons to the Discourse header. |
 |
Preview | Preview on Discourse Theme Creator |
 |
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
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 | List of links with the following properties: title, icon, URL, view and 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. |
Notes:
- URL can be absolute (https://www.example.com) or relative (/c/staff)
- Icons can be any FontAwesome 5 (free) icon name without the
fa-‘fab-’ ‘fas-’ or ‘far-’ parts or an 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.
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.
Last edited by @joffreyjaffeux 2024-07-17T07:03:10Z
Check document
Perform check on document: