Font awesome shows Squares until it is loaded

Question

I'm using font awesome like so:

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
  <script src="https://use.fontawesome.com/xxxxxxxx.js"></script>

and an element

However the font doesn't load immediately, and I see ugly squares in the meantime before its loaded. Any way round this?

Answer 1

You're experiencing FOUT (flash of unstyled text) as Font Awesome uses fonts to display their icons. Until the font is loaded you'll see the icon in a fallback font (for instance Arial). You see the box because Font Awesome uses Unicode PUA codepoints to map their icons to, and the fallback font has no characters there and will show the generic "missing character" box.

A solution would be to use FontFaceObserver to hide the icons until the Font Awesome font has loaded. Even better would be to use SVG images, as icon fonts are kind of a hack. Font Awesome provides them, so this might be an option for you.