[SOLVED] Font awesome 5 on pseudo elements

Font awesome 5 on pseudo elements

In font awesome 4 you could easily apply an icon to a :before/:after element using CSS.

Is the same possible with the new font awesome 5 JS/SVG implementation? As from what i can see this requires the relevant tag to exist in html which isn't always practical e.g. you have a CMS and want to apply an icon to all user created content <li> elements

I know in FA5 you can still use the old css/webfonts but it would be nice if the same functionality was available in the recommended method of using JS

Solution

You need to enable it (it's disabled by default).

<script>
  window.FontAwesomeConfig = {
    searchPseudoElements: true
  }
</script>

Css:

.class:before{
  display: none;
  content: "\f16c";
  font-family: "Font Awesome 5 Brands";
}

Other types: Font Awesome 5 + Solid or Regular or Light or Brands