Font Awesome in CSS pseudo elements not showing

Question

I have the font-awesome free version css linked in my html/php index, so if I call any FA icons on that page directly they work fine.

However, I'm trying to apply some to pseudo elements in my css and I can't get it to work. It only shows an empty square/box.

I've looked at the docs and I've tried this with single and double quotes, but no matter what it's an empty square still.

Is it clear to anyone what I'm doing wrong here?

a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
font-family: "Font Awesome 5 Solid";
content: "\f106";
font-weight: 400;
display: block;
position: absolute;
right: 20px;
font-size: 0.6em;
}

a[aria-expanded="true"]::before {
font-family: "Font Awesome 5 Solid";
content: "\f106";
}

VERY Minimal codepen, most CSS and JS stripped out https://codepen.io/anon/pen/yEeZWX

Answer 1

The Font family should specify Free.
Also note that for solid icons you would have to use font-weight:900

a[data-toggle="collapse"] {
  position: relative;
}

a[aria-expanded="false"]::before,
a[aria-expanded="true"]::before {
  font-family: "Font Awesome 5 Free";
  content: "\f106";
  font-weight: 900;
  display: block;
  position: absolute;
  right: 20px;
  font-size: 0.6em;
}

a[aria-expanded="true"]::before {
  font-family: "Font Awesome 5 Solid";
  content: "\f106";
}

<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" />
<div class="wrapper">
  <nav id="sidebar">
    <li class="active">
      <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">
        <i class="far fa-file-alt"></i> Pages
      </a>
    </li>
  </nav>
</div>