Font Awesome Icons not showing with css Content property

Question

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 Font Awesome icons not showing but this is with the font awesome classes, I'm using the css Content property so I can change the icon with javascript, but some of the icons don't show, like seen here

.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";
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
 <div class="controls main">
      <span class="button prev"></span>
      <span class="button play-pause"></span>
      <span class="button next"></span>
 </div>

is there a reason for this, like did i do anything wrong? if you want to see the whole project: go here

(btw does anyone know any cool animated play-pause buttons? i'm just curious)

Answer 1

FontAwesome displays different icons depending on the font-weight property, and the \f04a and \f04e icons are not available on the default font-weight of 400 in the free version. However, you can still use the icons using a font-weight of 600. Example:

.button {
  font-family: "Font Awesome 5 Free";
  width: 30px;
  display: inline-block;
  font-size: 28px;
  color: black;
  border: solid black;
  cursor: pointer;
}
.controls.main .play-pause::before {
  content: "\f144";
}

.controls.main .prev::before {
  content: "\f04a";
  font-weight: 600;
}

.controls.main .next::before {
  content: "\f04e";
  font-weight: 600;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
 <div class="controls main">
      <span class="button prev"></span>
      <span class="button play-pause"></span>
      <span class="button next"></span>
 </div>