Admin
1
I'm using the Font-Awesome icons with the recommended Javascript reference:
<script src="https://use.fontawesome.com/7c7031cd1a.js"></script>
When the page finishes loading and the icons appear, all text strings and/or elements around where icons are set to appear kind of jump into place, when each icon takes its designated width space.
Any way to avoid that? Thanks.
What you are seeing is known as Flash of Invisible Text (or Flash of Unstyled Contents). This is because the page is rendered before the external font is downloaded. Then, when the icon font is downloaded and ready, the page is repainted.
It is possible - but not recommended(!) - to block the whole page from displaying until the fonts are loaded. You can do this by hiding the <html> while the fonts are loading. Once they are in place, the .fa-events-icons-loading class is removed from the <html> by the font awesome script and everything is painted in the browser window at the same time.
html.fa-events-icons-loading body {
display: none;
}
You can compare This non-blocking example with this blocking version. The effects are not too visible, but the first one will display the text first, and then get repainted with the icons when they are loaded. The second will hide everything until the icons are loaded.
Edit: You can read more about asynchronous loading over at the Font Awesome Blog
