Using Font Awesome 5 In Pseudo Elements

If you're looking for Font Awesome 4, Click Here

Short Answer?


Slightly Longer Answer?

You can, however at the time of publishing it seems to cause a lot of problems in Firefox. It's probably best to move any Font Awesome Icons from your CSS to your HTML and avoid using them in Pseudo Elements.

Story Time!

I was working on and for some reason our site was taking like 90+ seconds to load only in Firefox. Chrome, Android, and Internet Explorer were all loading perfectly fine. I was ripping my hair out for weeks trying to figure out why. Repeatedly, I kept getting the "A webpage is slowing down your browser" notification but couldn't track down the issue. Finally, I was able to pinpoint the issue to Font Awesome when I tested the site on Firefox for Android. I was getting the same errors, but instead it said "A script is slowing down your browser" and linked to the Font Awesome All.js file.

Font Awesome Searching Psuedo Elements Takes A Lot Of Power

Great. Font awesome is all over our site. It'd be a huge undertaking to totally replace it but sure enough, comment out the Font Awesome script and suddenly the site works fine on Firefox. Un-comment the script and we're back to lag city.

Since the site uses Stencil and Webpack, I tried using the NPM package for FontAwesome where you can explicitly declare which of the 1000s of icons you're using for a smaller bundle size but that didn't make a difference either.

I eventually tracked the issue down to this bullshit piece of code (Sorry, I'm still frustrated):

This little piece of shit code was causing all my problems. What it does is essentially look through the CSS of EVERY ELEMENT in the DOM checking for any Font Awesome in pseudo elements. Right now there are 4316 elements on the Shoolu homepage. That's a lot of stuff to look through.

I checked which elements we were using as pseudo elements.

Those two god damn icons were causing a 90 second+ delay on all of our webpages just because they were loaded as pseudo elements and not the recommended <i> tags.

Needless to say I was frustrated.

I got them swapped for the appropriate <i> tags and things are running as smooth as butter.

If You Still Want To Know How

The first thing you need to do is turn on the pseudo search setting in your FontAwesomeConfig object. This takes a lot of DOM Queries so it's disabled by default.

You must make sure to set the FontAwesomeConfig object before you call the Font Awesome script or else it won't work.

Adding The CSS

So let's add a phone icon before any href="tel:" links. We'll start with this simple markup:

There are three important steps to getting this to work.

  1. Add display:none on the pseudo element.
  2. Set the font-family to either Font Awesome 5 Solid, Font Awesome 5 Regular, Font Awesome 5 Light, or Font Awesome 5 Brands depending on which style of Icon you need.
  3. Set the content of the psuedo element to the Unicode value for the icon you want. (For the phone icon it's \f095. Make sure to add the \ before the number)

Final Product

See the Pen Using Font Awesome 5 Icons as Pseudo Elements by Jack Harner (@jackharner) on CodePen.

Things To Remember

  1. This doesn't work well. Use something else, unless you absolutely have to. Expect performance issues when using this in production.
  2. Don't forget to switch up the Font Family based on which collection the icon is in (Regular, Light, Solid, or Brands).

Leave a Reply

Your email address will not be published. Required fields are marked *

Keep Up With Harner Designs!

Get updates about New Projects, Products, Discounts, and Giveaways from Harner Designs!

By submitting your email, you agree to our Privacy Policy and give us consent to send you marketing and promotional emails. You can unsubscribe at any time.