Add new link on header beside search icon

:mega: This feature is now available as a dedicated theme component.

Want to add a new link right next to search icon on header? Follow below steps:

Add this JavaScript code to your site theme

  1. Go to Admin
  2. Customize
  3. Themes
  4. Select the theme you wish to customize
  5. Edit CSS/HTML
  6. </head>
<script type="text/discourse-plugin" version="0.4">
const { iconNode } = require("discourse-common/lib/icon-library");
api.decorateWidget('header-icons:before', helper => {
    return helper.h('li', [
        helper.h('a#home-button.icon', {
            href:'https://www.google.com/',
            title: 'Google'
        }, iconNode('arrow-circle-up')),
    ]);
});
</script>

(Props to @Yuun for above code)

Change href, title and icon (arrow-circle-up) as per your requirement. See the complete list of available Font Awesome icons here. If using an icon that isn’t already included in Discourse, please also add the icon to the svg icon subset site setting. (See this guide to Font Awesome 5 in Discourse for more details.)

Ensure the theme is enabled and you should be able to see the new icon linking to Google right next to search icon! :tada:

Desktop:

Mobile:

Debugging

If it’s not working, try:

  • Look for error message in Browser console
  • View page source and see the error in a <script type='text/discourse-js-error'> block
34 Likes

We now have theme component for this:

6 Likes