I am using Font Awesome SVG with JavaScript a few times on a project. Now I am trying to create a button so when it is hovered over an arrow icon appears to the right of the text pointing to the right. When the button is hovered over there is just a blank square where the icon should be and the icon is appearing on the left with the text. 

Using

```
display:none 

```

got rid of the blank icon on the right of the button text. 

How do I make the icon appear in the blank square? 

This is the code 

```js
window.FontAwesomeConfig = {
        searchPseudoElements: true
}
```

```css
.fa-arrow-right:before {
    font-family: 'Font Awesome 5 Solid';
    content: "\f061";
    font-weight: 900;

}

 .btn-4 {
    border-radius: 50px;
    border: 3px solid #fff;
    color: #fff;
    overflow: hidden;
}

.btn-4:active {
    border-color: #17954c;
    color: #17954c;
}

.btn-4:hover {
    background: #24b662;
}

.btn-4:before {
    position: absolute;
    height: 100%;
    font-size: 125%;
    line-height: 3.5;
    color: #fff;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.btn-4:active:before {
    color: #17954c;
}

/* Button 4a */
.btn-4a:before {
    left: 130%;
    top: 0;
}

.btn-4a:hover:before {
    left: 80%;
}

/* Button 4b */
.btn-4b:before {
    left: -50%;
    top: 0;
}

.btn-4b:hover:before {
    left: 10%;
}
```

```html
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
<div class="container mw-100 mx-auto margin-top-70 purple-background">
        <div class="row">
         <div class="col-8" id="forum">
            <h2 class="text-center margin-top-40">Join the Book Club</h2>
            <p class="feature-text">What are you reading? Share the book love over on the forum</p>
         </div>
         <div class="col-4">
          <div class="margin-top-60">
            <button class="btn btn-4 btn-4a fa-arrow-right">Join Us</button>
          </div>
        </div>
      </div>
    </div>
```

I have taken screenshots to illustrate the problem [buttons](https://i.stack.imgur.com/9kT7b.png) and [buttons on hover](https://i.stack.imgur.com/SbtMx.png)