title: Font Awesome CSS Pseudo-elements
body: <p>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.   </p>
  
  <p>Using</p>
  
  <pre><code>display:none 
  </code></pre>
  
  <p>got rid of the blank icon on the right of the button text.  </p>
  
  <p>How do I make the icon appear in the blank square? </p>
  
  <p>This is the code </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.FontAwesomeConfig = {
          searchPseudoElements: true
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;div class="container mw-100 mx-auto margin-top-70 purple-background"&gt;
          &lt;div class="row"&gt;
           &lt;div class="col-8" id="forum"&gt;
              &lt;h2 class="text-center margin-top-40"&gt;Join the Book Club&lt;/h2&gt;
              &lt;p class="feature-text"&gt;What are you reading? Share the book love over on the forum&lt;/p&gt;
           &lt;/div&gt;
           &lt;div class="col-4"&gt;
            &lt;div class="margin-top-60"&gt;
              &lt;button class="btn btn-4 btn-4a fa-arrow-right"&gt;Join Us&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have taken screenshots to illustrate the problem <a href="https://i.stack.imgur.com/9kT7b.png" rel="nofollow noreferrer">buttons</a> and <a href="https://i.stack.imgur.com/SbtMx.png" rel="nofollow noreferrer">buttons on hover</a></p>