Font Awesome 5 SVG JS Before Pseudo Element

If you are having difficulty adding Font Awesome 5 SVG with JS with CSS :before pseudo element then you are not alone. Here’s how to do it:-

1 Load Font Awesome 5 SVG with JS in the normal way

<script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>

Note this is Font Awesome 5 Free version (while we wait for the Pro version on CDN)

2 Activate the Pseudo Element which is turned off by Default

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

3 Add the CSS to your Stylesheet with a couple of Amends

/* Other types: Font Awesome 5 + Solid or Regular or Light or Brands */
.your-class:before {
display: none;
content: "\f063";
font-family: "Font Awesome 5 Solid";
}

That’s it you can now use the :before Pseudo elements with Font Awesome SVG with JS as you have before with Fontawesome 4.

About the Author
Font Awesome 5 SVG Before Pseudo Element Font Awesome 5 SVG JS Before Pseudo Element 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.