If you like control, you can host Font Awesome yourself, and you can choose to use SVG + JS described below or Web Fonts + CSS to get icons into your projects.
Advertisement
Remove ads with a Pro plan!
Using this requires Font Awesome Pro
Pro
A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com.
And of course Pro-level plans come with…
All 16,083 Icons in Font Awesome
Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands
A Perpetual License to Use Pro
Services and Tools to Make Easy Work of Using Icons
The all.js file contains the core styling PLUS all of the icons in all the styles that you'll need when using Font Awesome. If you’re just using some styles, you can select just the JS files for the styles you need to cut down on file size and improve performance.
Which Files and Folders
What’s in there
/fontawesome6/pro/js
Icons and scripts for each style, or all of them at once.
Copy all.js or individual style script files you want to use into your project’s static assets directory, or wherever you prefer to keep front-end assets or vendor stuff.
Copy the all.js or individual style files into your project directories
Include Font Awesome in Your Project
Link the files into the <head> of each template or page where you want to use Font Awesome icons.
<head><!-- all.js loads all styles and icons --><scriptdefersrc="/your-path-to-fontawesome/js/all.js"></script></head>
Yuss! You’re Ready to Add Icons
Like Anakin said, it’s woooorking! All of our icons are now ready to do your project’s bidding. Learn how to add them to your project and then use their power to bring order and style to your UI!
Want use only certain styles when using our SVG with JS framework? The /js folder contains the core styling and additional files for all of Font Awesome's style options- solid, regular, light, duotone, thin, and brands.
Copy the fontawesome.js loader and the .js files for the styles you'd like to use into your project's static assets directory (or where ever you prefer to keep front end assets or vendor stuff). We recommend referencing the fontawesome.js loader last.
If your project is using an older version of Font Awesome, we've got you covered with backward compatiiblity for v5-based projects.
Version 5 Compatibility
Once loaded, our SVG + JS framework handles translating any Font Awesome 5 icon names, style syntax, and CSS pseudo-element icon references automatically.
<head><!-- all.js loads all styles and icons + include all v5 backwards compatibility by default --><scriptdefersrc="/your-path-to-fontawesome/js/all.js"></script></head>
This is true for when the js/all.js file is used or when you load only certain styles.
Version 4 Compatibility
If your project contains Font Awesome 4 icon references, you can include an additional file to support that specific version as well.
In addition to whatever v6 JS files you're including, you'll want to include the following v4-shims.js file, which will map v4 icon names to icons in the latest version of Font Awesome.
<head><!-- all.js loads all styles and icons --><scriptdefersrc="/your-path-to-fontawesome/js/all.js"></script><!-- support v4 icon references/syntax --><scriptdefersrc="/your-path-to-fontawesome/js/v4-shims.js"></script></head>