Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Font Awesome Blinking in Google Chrome

I am using FontAwesome as a few of my icons on my website:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

But, in chrome when I refresh the page it takes 0.5-ish second for Font Awesome to load causing the page to shift and then move back when the font is loaded.

I have tried it with Edge and Firefox and they load instantly, why is this?

like image 660
Lewis Holland Avatar asked Jan 30 '16 21:01

Lewis Holland


People also ask

Why My Font Awesome is not working?

Make sure you're using the latest and greatest by updating your CDN code reference, updating your Font Awesome package via npm, or downloading a fresh copy of Font Awesome. You can check with version an icon was added to on its detail page (e.g. question-circle was added in Verion 1 but last updated in 5.0.

What is FAS and fab in Font Awesome?

fas: font awesome solid. It is also free to use. fab: font awesome brands.

What is Aria hidden font awesome?

The simplest way to provide a text alternative is to use the aria-hidden="true" attribute on the icon and to include the text with an additional element, such as a <span> , with appropriate CSS to visually hide the element while keeping it accessible to assistive technologies.


1 Answers

Try putting it directly on your hosting server and load it from there. Loading assets from CDNs sometimes causes issues.

like image 183
Twixes Avatar answered Oct 06 '22 00:10

Twixes