Skip to content
Say hello to Web Awesome, the biggest and best library of open-source web components.
Pre-order today!

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 ChangedWhy We Changed ItWhat You Should Do
Added new _duotone-icons partialThis brings our Duotone icons in line with how we define, loop through, and render individual icon CSS rulesMake 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 mixinsThese weren’t needed any longer given Version 6’s browser supportUpdate any references in your Sass/Less files that use these mixins
Removed fa-display, fa-font-size, fa-font-size-base, fa-version variablesThese variables were not actively used by Font Awesome’s styling toolkitUpdate any references in your Sass/Less files that use these variables
Renamed _larger file to _sizingThis better describes the sizing-based utilities included in this partialUpdate any references to the old partial name to the new name
Removed CSS fallbacks and vendor prefixesMany modern CSS workflows provide their own fallbacks based on individual projects’ browser supportIf you need fallbacks or syntax to support a specific browser, we recommend implementing Autoprefixer in your project
Sass (SCSS) Only: Added new functions partialTo fix a Dart Sass deprecation and preserving compatibility with older Sass librariesIf 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";

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.

<!-- all.css loads all styles and icons -->
<!-- Your icons should show up just as before. -->

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.