(Superseded) 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
36๊ฐœ์˜ ์ข‹์•„์š”

We now have theme component for this:

6๊ฐœ์˜ ์ข‹์•„์š”