How to remove link to font-awesome CSS file from head

How To
1

I was using font-awesome brand logos for social links using the social media component. I removed this but the link to the font-awesome css remains in the head.

I am sure I don’t use font-awesome icons anywhere else, and when I run Lighthouse report, font-awesome-6.min.css shows up under the ‘Reduce unused CSS’ tab in Lighthouse and it is also causing the largest delay in render blocking resources.

I have two questions:

  1. How can I be 100% sure the font-awesome icons are not being used
  2. I am pretty sure they are not, so how can I remove the link tag to font-awesome and prevent it being downloaded with my site?

I tried using the asset loading optimisation technique explained here: Asset Loading Optimization – Bricks Academy and selecting external files, but this generated a lot of files, I am not sure why, but I write a lot of css in the code editor for components so was wondering if it is generating a file for all the pages I have written CSS on, and ultimately slowed the page even more.
Thanks

2

Hi hal,
I assume that you are still using a font-awesome regular icon somewhere. If it were a font-awesome brands icon, the stylesheet would be different.

Look at the source text in the frontend and search for “fa-” - then you should find what you are looking for.

Best regards,
timmse

1 Like
3

Thanks Timmse,
I always appreciate your responsiveness on here, one of the many reasons bricks is great to work.

Turns out it was the play icon overlay on a youtube video which I forgot about. Thank you.

4

Great, I’m glad you were able to identify the culprit :slight_smile: