How to add an icon in a navigation link?

[Canapin (Coin-coin le Canapin)]

I’d like to add a font awesome icon before “Chat” here:

How can I achieve this?

Note: I use Custom top navigation links for this button.

[Don]

Hello,

Maybe something like this to desktop header?

You can change the targeted nav with change the document.querySelector('#navigation-bar li a[href="/chat"]'); line to point to the correct a[href="..."] path.

And also you can change the icon with iconHTML('comment'); change the comment.

<script type="text/discourse-plugin" version="0.8">
  api.onPageChange(() => {
    const { iconHTML } = require("discourse-common/lib/icon-library");
    const navItem = document.querySelector('#navigation-bar li a[href="/chat"]');

    let icon = iconHTML('comment');
       
    if (navItem) {
      navItem.insertAdjacentHTML('afterbegin', icon)
    }
  });
</script>

[Jagster (Jakke Lehtonen)]

Nice!

(At least 20 characters)