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 ||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 ||These weren't needed any longer given Version 6's browser support||Update any references in your Sass/Less files that use these mixins|
|Removed ||These variables were not actively used by Font Awesome's styling toolkit||Update any references in your Sass/Less files that use these variables|
|Renamed ||This better describes the sizing-based utilities included in this partial||Update any references to the old partial name to the new name|
|Removed CSS fallbacks and vendor prefixes||Many modern CSS workflows provide their own fallbacks based on individual projects' browser support||If you need fallbacks or syntax to support a specific browser, we recommend implementing Autoprefixer (opens new window) in your project|
|Sass (SCSS) Only: Added new ||To fix a Dart Sass (opens new window) deprecation and preserving compatibility with older Sass libraries||If you have a reference an individual scss partial, like |
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.
Locate the Font Awesome Version 5 Sass/Less files in your project - these are most likely in the
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.
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 --> <link href="/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.