Add an icon to the sign up button

Support
2

Yes, that’s correct — those header buttons are a widget located here (more about widgets: A tour of how the Widget (Virtual DOM) code in Discourse works)

What I’m doing here is reopening the widget, copying the existing widget, and adding the line icon: user. You can add this to your theme’s </head> section in admin > customize > themes (or head_tag.html if you’re developing a remote theme)

<script type="text/discourse-plugin" version="0.8.13">
api.reopenWidget("header-buttons", {
      tagName: "span.header-buttons",

  html(attrs) {
    if (this.currentUser) {
      return;
    }

    const buttons = [];

    if (attrs.canSignUp && !attrs.topic) {
      buttons.push(
        this.attach("button", {
          label: "sign_up",
          className: "btn-primary btn-small sign-up-button",
          action: "showCreateAccount",
          icon: "user"
        })
      );
    }

    buttons.push(
      this.attach("button", {
        label: "log_in",
        className: "btn-primary btn-small login-button",
        action: "showLogin",
        icon: "user"
      })
    );
    
    return buttons;
  }
});
</script>
9 Likes