title: Font Awesome Icons not showing with css Content property
body: <p>I'm trying to get Font Awesome icons to show up in my layout and so far only the circle play icon shows, I looked at <a href="https://stackoverflow.com/questions/31762881/font-awesome-icons-not-showing">Font Awesome icons not showing</a> but this is with the font awesome classes, I'm using the css <code>Content</code> property so I can change the icon with javascript, but some of the icons don't show, like seen here</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-css lang-css prettyprint-override"><code>.button {
    font-family: "Font Awesome 5 Free";
    width: 30px;
    display: inline-block;
    font-size: 28px;
    color: black;
    border: solid black;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
  }
  .controls.main .play-pause::before {
    content: "\f144";
  }
  
  .controls.main .prev::before {
    content: "\f04a";
  }
  
  .controls.main .next::before {
    content: "\f04e";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/&gt;
   &lt;div class="controls main"&gt;
        &lt;span class="button prev"&gt;&lt;/span&gt;
        &lt;span class="button play-pause"&gt;&lt;/span&gt;
        &lt;span class="button next"&gt;&lt;/span&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>is there a reason for this, like did i do anything wrong? if you want to see the whole project: <a href="https://jsfiddle.net/FoxyGames/bn7u9hys/66/" rel="nofollow noreferrer">go here</a></p>
  <p>(btw does anyone know any cool animated play-pause buttons? i'm just curious)</p>