While async icon loading allows the page to render sooner it can also make page layouts shift.
You can avoid icons loading and shifting your layout or text by leveraging some classes that are added to the
As the browser begins to search for icons the
<html> tag will contain
i2svg is our abbreviation for converting "i tags to SVG")
After icon replacement has completed the pending class will be replaced with
fontawesome-i2svg-complete and the
fontawesome-i2svg-active will be added as well.
fontawesome-i2svg-active class will remain once the first successful
loading of icons has finished. However, if another batch of icons is loaded the
complete will switch to
And again once the icon replacement occurs we get back to our
This allows us to do some interesting things with CSS. For example we could hide the
<body> until the icons were loaded.
Of if we want to only show certain sections once icons are replaced.