# 为注册按钮添加图标

**URL:** <https://meta.discourse.org/t/add-an-icon-to-the-sign-up-button/121027>\
**Category:** Support\
**Created:** [2019年六月21日 22:09 UTC](https://meta.discourse.org/t/add-an-icon-to-the-sign-up-button/121027 "2019-06-21T22:09:33Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ZerefGG](https://avatars.discourse-cdn.com/v4/letter/z/bc79bd/32.png) [@ZerefGG](https://meta.discourse.org/u/ZerefGG)\
**Post date:** [2019年六月21日 22:09 UTC](https://meta.discourse.org/t/add-an-icon-to-the-sign-up-button/121027/1 "2019-06-21T22:09:33Z")

</div>

Hello,  
I want to add an icon to the register button using font awesome.  
I looked everywhere for the html templates but I didn’t find them, so I guess they are being generated from javascript files, right?  
Anyone can point me where I can add an icon to the register button?

For example:  
this:  
 ![1](https://global.discourse-cdn.com/meta/original/3X/7/b/7b2cdd508afefce1f2b3ace5928a4fcb006dd0fe.jpeg)  
to:

![2](https://global.discourse-cdn.com/meta/original/3X/2/9/293bb5edccd87f8084583025c68f462457657300.jpeg)

Thanks in advance

---

<div class="post-metadata">

**Author:** ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)\
**Post date:** [2019年六月22日 02:36 UTC](https://meta.discourse.org/t/add-an-icon-to-the-sign-up-button/121027/2 "2019-06-22T02:36:53Z")

</div>

Yes, that’s correct — those header buttons are a widget [located here](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/widgets/header.js.es6#L227) (more about widgets: [A tour of how the Widget (Virtual DOM) code in Discourse works](https://meta.discourse.org/t/a-tour-of-how-the-widget-virtual-dom-code-in-discourse-works/40347))

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)

```xml
<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>

```

---

<div class="post-metadata">

**Author:** ![ZerefGG](https://avatars.discourse-cdn.com/v4/letter/z/bc79bd/32.png) [@ZerefGG](https://meta.discourse.org/u/ZerefGG)\
**Post date:** [2019年六月22日 10:51 UTC](https://meta.discourse.org/t/add-an-icon-to-the-sign-up-button/121027/3 "2019-06-22T10:51:16Z")

</div>

Thank you, it worked.

---

<div class="post-metadata">

**Author:** ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)\
**Post date:** [2019年七月22日 10:51 UTC](https://meta.discourse.org/t/add-an-icon-to-the-sign-up-button/121027/4 "2019-07-22T10:51:21Z")

</div>

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