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?
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.
fas: font awesome solid. It is also free to use. fab: font awesome brands.
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.
Try putting it directly on your hosting server and load it from there. Loading assets from CDNs sometimes causes issues.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With