We've worked hard to make the upgrading to Version 6 smooth and painless when using Sass or Less, but there are a few steps and things to be mindful of.
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 30,013 icons in Font Awesome
5 Classic styles of every icon
4 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
We introduced some changes that won't break at a production or published project-level, but may break at the compilation step when switching to Version 6's Sass and Less.
What Changed
Why We Changed It
What You Should Do
Added new _duotone-icons partial
This brings our Duotone icons in line with how we define, loop through, and render individual icon CSS rules
Make sure to include this new Duotone partial in your Sass/Less compile if you're using Duotone icons
Removed fa-icon-rotate and fa-icon-flip mixins
These weren't needed any longer given Version 6's browser support
Update any references in your Sass/Less files that use these mixins
If you're using Font Awesome 5's preprocessor assets, you'll need to swap out and disconnect those old files, then place and hook up the new Version 6 files in your project.
1. Remove Any Version 5 Files From Your Project
Locate the Font Awesome Version 5 Sass/Less files in your project - these are most likely in the scss or less folders respectively. Once found, remove those files to prevent the conflicts that may come from loading two different versions of Font Awesome in your Sass/Less compile.
You'll next want to remove Font Awesome Version 5's Web Fonts from your project - these are most likely found in the webfonts folder you copied over when setting up v5.
2. Download Version 6's Sass/Less
Next, download Version 6 for the Web and unpack the files and icons. You can then follow some familiar steps to add Font Awesome 6 to your Sass or Less compile.
3. Update Version 5 References to Point to Version 6 Files
If your project's Sass or Less has a custom compile that includes the Font Awesome files, then you should see your preprocessor compiling with the new Version 6 assets.
But if you're using Duotone icons, you'll need to add the new _duotone-icons partial, so you'll have two duotone files, like this:
// You probably already include the core styles@import"./fontawesome/scss/fontawesome.scss";// For Duotones you need both of these files@import"./fontawesome/scss/duotone.scss";@import"./fontawesome/scss/_duotone-icons.scss";// You can include all the other styles the same as before@import"./fontawesome/scss/solid.scss";@import"./fontawesome/scss/brands.scss";
// You probably already include the core styles@import"./fontawesome/less/fontawesome.less";// For Duotones you need both of these files@import"./fontawesome/less/duotone.less";@import"./fontawesome/less/_duotone-icons.less";// You can include all the other styles the same as before@import"./fontawesome/less/solid.less";@import"./fontawesome/less/brands.less";
If you're using the Font Awesome Sass/Less compile to output your CSS directly, you may need to update your old Version 5 references to point to the new Version 6 assets you've compiled.
<head><!-- all.css loads all styles and icons --><linkhref="/your_path_to_version_6_compiled_files/css/fontawesome.css"rel="stylesheet"></head><body><!-- Your icons should show up just as before. --></body>
You're All Set!
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.