I’m trying to add an icon and text link into our header to using Theme Component I’ve managed to add an icon using: const { iconNode } = require("discourse-common/lib/icon-library"); api.decorateWidget('header-icons:before', helper => { return helper.h('li.header-dropdown-toggle', [ helper.h('a.icon', { href:'/docs', title: 'Document' }, iconNode("book")), ]); }); [image] But I’m struggling to add some text next to it that also links to the Documents url I’ve tried adding the below - but the text isn’t linked api.decorateWidget('header-icons:before', helper => { return helper.h('li.header-dropdown-toggle', [ helper.h('h3', { href:'/docs', title: 'Document' }, 'Docs'), ]); [image] What am i missing? Also is there a way to have the icon the the left side of the header (next to our logo)? Thanks in advance

In your example, you need to insert your text here: helper.h('a.icon', { href:'/docs', title: 'Document' }, ["test", iconNode("book")]), You will need to adjust the CSS on the link. For example: padding-inline-end: 2em; justify-content: space-between; color: currentcolor; [chrome_Tk18DUhJQQ] [image] Martyn Thomas: Also is there a way to have the icon the the left side of the header (next to our logo)? If you mean at the right:, you can try: api.decorateWidget('home-logo:after', helper => { return helper.h('div.d-header-icons', [ helper.h('a.icon.btn-flat.doc', { href:'/docs', title: 'Document' }, [iconNode("book"), "Doc"]), ]); }); .d-header-icons .icon.doc { width: auto; gap: 0.5em; margin-inline: 1em; & .d-icon { width: 1em; } } [image] I tested it quickly. You might encounter some quirks, but you should get the general idea!

[image] Custom Header Links Theme component discourse2 Summary Custom Header Links allows you to easily add custom text-based links to the header. eyeglasses Preview Preview on Discourse Theme Creator hammer_and_wrench Repository Link GitHub - discourse/discourse-custom-header-links · GitHub open_book New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Features Desktop [Capture] Mobile [Capture] (due to very limited space, adding more than one link on mo… [image] Custom Header Links (icons) Theme component 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 [Capture3] Mobile [Capture] Settings This component includes a …

Right, I don’t know why I did not link those components, I knew their existence. :man_facepalming:

I was poking around those components - as i wanted a bit of both lol

Worked great - thanks. Now to spend the evening fighting with CSS to change the font color lol

Use decorateWidget to add text link to header

Development

Lilly (Lillian ) December 22, 2023, 7:03pm 3

Topic		Replies	Views
How to add a link icon to the header Development	3	656	February 2, 2024
Adding a custom Link/Icon to the discourse header Product Support	3	3878	January 21, 2019
Link on Top header to Go to Home page of main site Product Support	1	1402	February 25, 2020
Icons + texts? Product Support custom-header-links , custom-header-icons	2	132	July 4, 2026
Adding a link into the mobile header Product Support	5	1839	January 21, 2019

Use decorateWidget to add text link to header

Related topics