How to prevent images from shifting content when loading?

Question

I'm having an issue with glyphicons and images on my website . When I put them in floated content, they load after the text next to them and cause everything to shift when the page is refreshed.

Video demonstration (move the mouse out of the video player and the menu will go away after a few seconds).

How do I prevent this shift from happening?

Answer 1

If I'm not mistaken the icons come from a web font.

Until they load, you get some garbage (empty squares or something), as the browser can't display it.

One solution might be to try to set width of the icon in CSS (perhaps min-width ) - remember that you're most likely styling the :before element, not the element itself. See the CSS used for it for reference.