Using JavaScript to load SVG icons provides a non-blocking mechanism to show icons on a page. If you want more fine-grained control over how icons appear you can use CSS and our loading events.
Advertisement
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
All 26,233 icons in Font Awesome
5 Classic styles of every icon
3 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
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 <html> tag as part of the loading operations
that the JavaScript engine performs.
<html><head></head><body><iclass="fas fa-user"></i> My User
<scriptdefersrc="/static/fontawesome/fontawesome-all.js"></script></body></html>
As the browser begins to search for icons the <html> tag will contain
fontawesome-i2svg-pending. (i2svg is our abbreviation for converting "i
tags to SVG")
<htmlclass="fontawesome-i2svg-pending">
...
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.
The 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 pending again.