Font awesome in CSS content not rendering on mobile

Question

So here is a basic example of Font Awesome intergation as a CSS content pseudo element:

ul {
  list-style: none;
}
li:before {
  content: '\f105';
  font-family: 'FontAwesome';
  margin-right: 1rem;
}

<ul>
  <li>Item</li>
  <li>Another item</li>
  <li>Yet another item</li>
</ul>

External URL to test: https://jsfiddle.net/1zknmxLg/2/

Everything works as it used to work with previous version of Font Awesome, however this one doesn't render the icons on any mobile phone (tested on iPhone 7 and latest Android).

Any help would be appreciated.

Answer 1

After going through the documentation, the correct usage is:

li:after {
    content: '\f105';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

If you used a paid (pro) version, replace Free by Pro (or Brand). font-weight: 900; stands for solid icons.