Font Awesome not displaying when using content

Question

I have font awesome CSS in my head. If i do this, it works fine:

<p>This works</p>
<i class="fas fa-plus"></i>

But if I do this I just get the square:

<div class="myfaplus"></div>

.myfaplus:before {
    content: "\f067";
    font-family: "Font Awesome 5 Free";
}

I just dont get it. I pulled apart the font awesome css file and its the exact same?

See https://codepen.io/monstamash/pen/VwvjjWq

Answer 1

You need to add font-weight: 900; (which is added by the fas class)