How can your project get the best performance when using Font Awesome? That's a complex question, but one worth exploring.
SVG with JavaScript
This implementation encodes icon data and the mechanism to display them in the browser in JavaScript code that the browser executes.
Will be a good choice when:
- you don't have a very large number of icons to display
- you have a frontend app (like React, Angular, or Vue.js)
- you can use JavaScript subsetting to reduce file size
- the user agent (browser) is less resource-restricted (has a faster CPU and enough memory)
Web Fonts with CSS
This implementation uses web fonts as the file format and relies on the browser to render icons as it would any custom font.
Will be a good choice when:
- you would prefer the battle-tested and mature web fonts technology
- you have a very large number of icons to display
- the use agent (browser) is resource restricted (slower CPU)
SVG Sprites
This implementation uses a technique where SVG icons are defined in a separate file and then referenced as symbols in the site.
Will be a good choice when:
- you have a smaller number of icons
- you can't or don't want to rely on JavaScript
- you are willing to style with CSS the icons yourself
- the use agent (browser) is resource restricted (slower CPU)
Individual SVG icons
This implementation represents just the raw SVG files where each file is one Font Awesome icon.
Will be a good choice when:
- individual small file (requests) are efficient for you or you are embedding SVG directly in your page
- you can't or don't want to rely on JavaScript
- you are willing to style with CSS the icons yourself
Batched Mutations
SVG with JavaScript replaces <i> tags (and others) matching a set of criteria with <svg>.
These operations have been optimized to make use of window.requestAnimationFrame (opens new window).
The step of searching / reading the DOM and performing the mutations has been split up. This prevents layout thrashing in the browser and saves execution time.