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 sveral styles of icons, each with its own prefix to let you set the style of an icon:
<!-- Version 4's syntax --><iclass="fa fa-camera-retro"></i><!-- Version 6's syntax --><iclass="fa-solid fa-camera-retro"></i><!-- example: regular style of camera-retro --><iclass="fa-regular fa-camera-retro"></i><!-- example: light style of camera-retro --><iclass="fa-light fa-camera-retro"></i><!-- example: duotone style of camera-retro --><iclass="fa-duotone fa-camera-retro"></i><!-- example: thin style of camera-retro --><iclass="fa-thin fa-camera-retro"></i><!-- example: sharp solid style of camera-retro --><iclass="fa-sharp 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
Make a Clean Cutover
The most future-proof way to upgrade from Version 4 to 6 is to add the Version 6 assets by following the Quick Start instructions. We've even included older version compatibility by default to help.
If that's not possible, you can follow the more detailed instructions below.
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(opens new window).
Find the fontawesome files in your project directories:
project_root
|__assets
|__fontawesome
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 --><scriptdefersrc="/your_path_to_version_6_files/js/solid.js"></script><scriptdefersrc="/your_path_to_version_6_files/js/brands.js"></script><!-- add the core fontawesome.js file --><scriptdefersrc="/your_path_to_version_6_files/js/fontawesome.js"></script><!-- support v4 icon references/syntax for SVG+JS --><scriptdefersrc="/your-path-to-fontawesome/js/v4-shims.js"></script></head><body><!-- Your icons should show up just as before --></body>
When using Web Fonts, you'll include the v4-shims.css file below the other Version 6 JS files you're including:
<head><!-- add the core fontawesome file --><linkhref="/your_path_to_version_6_files/css/fontawesome.css"rel="stylesheet"><!-- Your Version 4 js file gets replaced with the .css 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 --><linkhref="/your_path_to_version_6_files/css/solid.css"rel="stylesheet"><linkhref="/your_path_to_version_6_files/css/brands.css"rel="stylesheet"><!-- support v4 icon references/syntax for Web Fonts --><linkhref="/your-path-to-fontawesome/css/v4-shims.css"rel="stylesheet"/></head><body><!-- Your icons should show up just as before --></body>
Your project will now load Version 6 and render any existing icons using our newest and freshest icons and options. Are you running into trouble? Check out our troubleshooting guide for answers to common questions about using Font Awesome on the Web.
Using pseudo-elements and want to switch to SVG + JS method?
You'll need to complete a few additional steps to get up and running.
Icons Renamed Since Version 4
A lot of Version 4 icons have gone through name changes in Version 5 and Version 6. But, again, don't worry if you have a project using Version 4 names. We made aliases for the old names that will translate to the new names if you don't want to update your icon references.