How to add an icon in a navigation link?

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.


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.

Screenshot 2022-04-22 at 18.43.45

<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)


(At least 20 characters)


This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.