5

We just bought the pro version and switched to SVG as the icons look significantly nicer.

However we have some flickering issues on every page as it loads the icons.

I've mitigated the jarring nature of it a little by ensuring the page doesn't resize when the icons load (as previously an icon with text under it would load with the text at the top of the container, and then the icon loading would shift it downwards).

However it's still kind of irritating. These problems didn't occur with the CSS version.

Specifically:

  • Is there some way to minimise this effect I haven't thought of
  • Can we force the svg to load before we load the page somehow? The reference to font awesome is a javascript file but I've already put it into the <head> at the top.
  • Can we delay the page load until it's ready?
  • Is there a hybrid solution whereby it originally loads the CSS version but then replaces them when the svg version loads?
NibblyPig
  • 51,118
  • 72
  • 200
  • 356
  • Having the same issue now, thinking about perhaps a css fade in on all elements as a hacky workaround so its not so jarring. – Collins Oct 28 '20 at 11:39
  • IIRC in the end I just hid the entire page and hooked into some event (maybe even DOM ready) and then revealed it in one go. – NibblyPig Oct 30 '20 at 01:52

1 Answers1

2

This issue has been acknowledged by FontAwesome and they've documented their recommended solution here:

https://fontawesome.com/how-to-use/on-the-web/advanced/svg-asynchronous-loading

There are a couple of classes added to the html tag by FontAwesome (when using the SVG+SJ method), which can be leveraged to reduce/eliminate the shifting caused by the loading icons.

As the icons are loaded, the class fontawesome-i2svg-pending is added to the html tag. Once they're loaded, that class will be removed and replaced with fontawesome-i2svg-complete and fontawesome-i2svg-active.

Because of this, you can easily use CSS to hide the shifting sections until the icons are loaded, like so:

<html>
  <body class="wait-for-icons">
    <p>some initially hidden content</p>
    <i class="fa-solid fa-frog"></i>
  </body>
</html>
    
<style>
  .wait-for-icons {
    display: none;  
  }

  .fontawesome-i2svg-active .wait-for-icons {
    display: initial;
  }
</style>
Chopin23
  • 87
  • 1
  • 8
Collins
  • 1,069
  • 14
  • 35
  • I have the same problem here, I replaced the CDN with eitehr js or css local but still same issue. – Marouen Jan 24 '21 at 05:04