Fontawesome PSI notification

Hi all,

So I added two social font awesome icons to my design and exported it to my webserver.

When I run page speed insights it reports ‘Ensure text remains visible during webfont load’

I have fonts hosted locally so why the message?

Would it be better not to use fontawesome and just use svg’s for Facebook and Instagram icons instead?

Thanks in advance… John

Have you tried the cssicons instead of font awesome, they create svgs rather than loading a font.
There are less choices than font awesome (infact one facebook “F”) but you could try styling it with css

The bootstrap icons add as an svg as well

1 Like

Thank you. I’ll give it a try… :+1:

I think there is a reason Bootstrap came out with their own SVG Icon set. When Bootstrap 5.3 becomes official it will be more apparent and it will have mostly to do with the light/dark craze. In the demo 5.3 Bootstrap page you see them inline the svg(s) and then they are hidden first thing under the body tag. Then referenced elsewhere in the body and probably going with the filter property to change the light/dark settings…never understood the phrase “font icon” anyway. :ninja:

A font that contains icons? :man_shrugging:

I have had that phrase stuck in my head ever since I read this article

Using SVG Icons

1 Like

That is quite an interesting article, Learned a new technique, thanks