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
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.

scss
less

// You probably already include the core styles
@import "./fontawesome/scss/fontawesome.scss";

// You can include all the other styles the same as before
@import "./fontawesome/scss/solid.scss";
@import "./fontawesome/scss/duotone.scss";
@import "./fontawesome/scss/brands.scss";

// sharp solid style
@import "./fontawesome/scss/sharp-solid.scss";

// duotone solid and duotone regular styles
@import "./fontawesome/scss/duotone.scss";
@import "./fontawesome/scss/duotone-regular.scss";

// sharp duotone solid style
@import "./fontawesome/scss/sharp-duotone-solid.scss";

// You probably already include the core styles
@import "./fontawesome/less/fontawesome.less";

// You can include all the other styles the same as before
@import "./fontawesome/less/solid.less";
@import "./fontawesome/less/brands.less";

// sharp solid style
@import "./fontawesome/scss/sharp-solid.less";

// duotone solid and duotone regular styles
@import "./fontawesome/scss/duotone.less";
@import "./fontawesome/scss/duotone-regular.less";

// sharp duotone solid style
@import "./fontawesome/scss/sharp-duotone-solid.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.