The "before" pseudo element not working in Font awesome v.5

UPDATE 3:

The font-family is wrong.

use font-family: "Font Awesome 5 Brands"

And maybe you have to set a font-weight see documentation

UPDATE 2: TL;DR

The font-family is wrong.

use font-family: "Font Awesome 5 Brands"

---

For Font Awesome 5 this must be one of the following:

Updated because you use css webfonts:

For method Web Fonts with CSS

Free

font-family: "Font Awesome 5 Free"

Pro

font-family: "Font Awesome 5 Pro"

Brands => use this!

font-family: "Font Awesome 5 Brands"

See here: https://jsfiddle.net/nwodoo32/1/

---

For method SVG with Javascript

Solid

font-family: "Font Awesome 5 Solid"

Regular

font-family: "Font Awesome 5 Regular"

Brands

font-family: "Font Awesome 5 Brands"

Light (Pro)

font-family: "Font Awesome 5 Light"

You must change your font family and also you must define font weight.

<ul>
<li class="facebook"> Facebook</li>
<li><i class="fab fa-twitter-square"></i> Twitter</li>
</ul>

li.facebook:before {
    content: "\f09a";
    font-family: "Font Awesome 5 Brands"; /* change like this */
    font-weight: 900; /* insert this definition */
}
li {
  list-style:none;
}