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.
Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.
Last edited by @joffreyjaffeux 2024-07-17T07:03:10Z
Check document
Perform check on document: