Upgrade from Version 4
Are you using Font Awesome Version 4 on a project and ready to upgrade? We’ve tried to make it as straightforward and easy as possible to upgrade from Version 4 to Version 6.
When we released Version 5, we redesigned it from scratch. And now with Version 6, we’ve built upon that foundation and added features and improvements all around. With that in mind, there are some differences from v4 to keep in mind when using v6.
What’s Changed From Version 4 to 6?
New Icon Styles
We introduced several new styles and now have Solid, Regular, Light, Duotone, and Thin styles for each and every icon in Font Awesome. We also separated out Brand icons on their own for easier use.
It’s still the case that for each icon you want to use, you need to:
- specify the icon’s name
- use the proper prefix
Version 4 just had one prefix — fa. Version 6 now has several styles of icons, each with its own prefix to let you set the style of an icon:
| Icon Style | Availability | New Prefix | SVG + JS Filename | Web Font Filename |
|---|---|---|---|---|
| Brands | Free | fa-brands | brands.js | fa-brands-400.* |
| Solid | Free | fa-solid | solid.js | fa-solid-900.* |
| Regular | Pro only | fa-regular | regular.js | fa-regular-400.* |
| Light | Pro only | fa-light | light.js | fa-light-300.* |
| Thin | Pro only | fa-thin | thin.js | fa-thin-100.* |
| Duotone Solid | Pro only | fa-duotone fa-solid | duotone.js | fa-duotone-900.* |
| Duotone Regular | Pro only | fa-duotone fa-regular | duotone-regular.js | fa-duotone-regular-400.* |
| Duotone Light | Pro only | fa-duotone fa-light | duotone-light.js | fa-duotone-light-300.* |
| Duotone Thin | Pro only | fa-duotone fa-thin | duotone-thin.js | fa-duotone-thin-100.* |
| Sharp Solid | Pro only | fa-sharp fa-solid | sharp-solid.js | fa-sharp-solid-900.* |
| Sharp Regular | Pro only | fa-sharp fa-regular | sharp-regular.js | fa-sharp-regular-400.* |
| Sharp Light | Pro only | fa-sharp fa-light | sharp-light.js | fa-sharp-light-300.* |
| Sharp Thin | Pro only | fa-sharp fa-thin | sharp-thin.js | fa-sharp-thin-100.* |
| Sharp Duotone Solid | Pro only | fa-sharp-duotone fa-solid | sharp-duotone-solid.js | fa-sharp-duotone-solid-900.* |
| Sharp Duotone Regular | Pro only | fa-sharp-duotone fa-regular | sharp-duotone-regular.js | fa-sharp-duotone-regular-400.* |
| Sharp Duotone Light | Pro only | fa-sharp-duotone fa-light | sharp-duotone-light.js | fa-sharp-duotone-light-300.* |
| Sharp Duotone Thin | Pro only | fa-sharp-duotone fa-thin | sharp-duotone-thin.js | fa-sharp-duotone-thin-100.* |
<!-- Version 4's syntax --><i class="fa fa-camera-retro"></i>
<!-- Version 6's syntax --><i class="fa-solid fa-camera-retro"></i>
<!-- example: duotone style of camera-retro --><i class="fa-duotone fa-solid fa-camera-retro"></i>
<!-- example: sharp solid style of camera-retro --><i class="fa-sharp fa-solid fa-camera-retro"></i>
<!-- example: sharp duotone solid style of camera-retro --><i class="fa-sharp-duotone fa-solid fa-camera-retro"></i>Outline Style Icons are Now Regular Style
Similarly, all icons with an outlined style (their name usually ended with -o) are now part of the Regular style, use the fa-regular style class, and have had their -o suffix removed.
Browser Support
Version 6 supports all modern web browsers out of the box. But it does not support older or deprecated browsers that Version 4 once did. Check out official browser support list to make sure your project needs are covered.
How to Upgrade from Version 4 to 6
1. Locate and Remove Version 4 Assets & References
Loading two different versions of Font Awesome may cause conflicts, so you’ll need to locate the old files and remove them before adding in Version 6. Look for any folder containing Font Awesome assets like Web Fonts (/fontawesome/fonts/), CSS (/fontawesome/css), and pre-processor options (/fontawesome/less and /fontawesome/scss).
Next, remove the lines that include Version 4’s CSS or JS from the <head> of your templates/pages’ HTML, including any that point to Version 4’s CDN.
Find the fontawesome files in your project directories:
project_root|__assets |__fontawesome2. Set up Version 6 Assets
Use a Kit (Recommended)
We recommend using a Kit — It’s like a CDN just for you and it comes with older version compatibility automatically included!
Other Methods
If you can’t use a kit, you can choose one of the other ways to set up Font Awesome on the Web. To host the files yourself, follow the instructions for using hosting yourself that works best for your project:
Add the Version 4 Shim
If you don’t want to update all the icon references across your project, you can use our Version 4 shim to map v4 icon names to those in the latest version of Font Awesome.
When using SVG + JS, you’ll add the v4-shims.js file below the other Version 6 JS files you’re including:
<head> <!-- Your Version 4 js file gets repalced with the .js files for the styles you want to use --> <!-- In this example, we added the Solid and Brands styles, but you can add any or all of the styles --> <script defer src="/your_path_to_version_6_files/js/solid.js"></script> <script defer src="/your_path_to_version_6_files/js/brands.js"></script>
<!-- add the core fontawesome.js file --> <script defer src="/your_path_to_version_6_files/js/fontawesome.js"></script>
<!-- support v4 icon references/syntax for SVG+JS --> <script defer src="/your-path-to-fontawesome/js/v4-shims.js"></script> </head> <body> <!-- Your icons should show up just as before --> </body>