Sass (SCSS) and Less
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.
Breaking Changes
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 |
Removed fa-display, fa-font-size, fa-font-size-base, fa-version variables | 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 _larger file to _sizing | 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 in your project |
Sass (SCSS) Only: Added new functions partial | To fix a Dart Sass deprecation and preserving compatibility with older Sass libraries | If you have a reference an individual scss partial, like variables or mixins, make sure to include the functions partial before |
Upgrading to Version 6’s Sass or Less
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 --> <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.
You might want to go check out the big pile of new icons we've added in Version 6, including the new Sharp Family and Thin Style, or check out all of Version 6's new styling options.