Upcoming Header Changes - Preparing Themes and Plugins

HI @Danny_Dainton,

Take a look at the Custom Header Links (icons) theme-component. I believe it does what you need.

If you can’t use the theme-component, api.headerIcons.add will do the trick. :smiley:

  • Create a new initializer file. It needs to have the extension .gjs
  • The following code should do what you want:
// javascripts/discourse/initializers/custom-header-icons.gjs

import { apiInitializer } from "discourse/lib/api";
import dIcon from "discourse-common/helpers/d-icon";

export default apiInitializer("1.34.0", (api) => {
  api.headerIcons.add(
    "custom-header-home",
    <template>
      <li>
        <a id="graduation-cap" class="icon" href="https://example.com/" title="Learning Center">
          {{dIcon "graduation-cap"}}
        </a>
      </li>
    </template>,
    { before: "search" }
  );
});
4 Likes