CODEWITHSUNDEEP
javascripthtmlfont-awesome
ashcanschool
ashcanschool

Reputation: 327

Font Awesome Icons and Responsive Templates

This is kind of a nit-picky issue but it's driving me crazy. I've built a boostrap responsive web template that uses Font Awesome icons throughout.

When I go to load or reload a page what seems to happen is that a split second before the font awesome icons load the grid loads and then is populated by the icons. Now because the template is responsive it shutters/jiggles when it loads from a grid without the icons in it to the correct size when the icons come in and take up their respective places.

Does anyone have a suggestion on how to either change the order of what loads first or to hold back the entire page until everything has loaded and then display in one go?

I've attempted to re-arrange what order the CSS files load in (tried swapping bootstrap with font-awesome CSS links)

I'm wondering if there is a JavaScript event that will wait until everything loads before displaying. While this approach found more info on the intertubes it was decided not condoned. However, I didn't see an alternative put forward in the answers I read through.

I've got a crazy feeling that this is so basic that I can't see the wood for the trees, so if I'm just not using the right vocabulary to find this, just give me the terms of what I need to be searching and I'll go off and learn something new.

Upvotes: 0

Views: 1346

Answers (1)

JoeSloth
JoeSloth

Reputation: 236

You could use WebfontLoader to load the font awesome fonts. That way you can use their events and classes to show and hide the grid.

https://github.com/typekit/webfontloader

Upvotes: 1

Related Questions