Are you using SCSS as a CSS preprocessor in your project? No problemo, Font Awesome has an SCSS version if you'd prefer to import our styling into your workflow.

Advertisement

We’ll cover the basics of picking the SCSS files you’ll need for your project, adding Font Awesome to your compile, inject code into a class with Mixins, and more.

Before You Get Started

Make sure you...

Get Set Up

You'll find everything you need in the fontawesome6 directory of the Font Awesome download. Below is the list of files made specifically for SCSS. You can add them all to your project or pick just the ones you need.

Files What They Do
fontawesome.scss Main Font Awesome compile
brands.scss Brand icon styles
duotone.scss Duotone icon styles
solid.scss Solid icon styles
regular.scss Regular icon styles
light.scss Light icon styles
thin.scss Thin icon styles
duotone.scss Duotone icon styles
_variables.scss Where variables are defined that are used throughout styling
_mixins.scss Utilities used throughout styling/icon definitions
_core.scss Base icon reference class syntax and definition
_duotone-icons.scss Duotone icon classes
_sizing.scss icon sizing support styling
_fixed-width.scss fixed-width icon support styling
_list.scss icons in a list support styling
_bordered-pulled.scss bordered + pulled icon support styling
_animated.scss animated icon support styling
_rotated-flipped.scss rotating icons support styling
_stacked.scss stacking icons support styling
_icons.scss All icon definitions
_screen-reader.scss screen-reader specific and accessibility support styling
Advertisement

Adding Font Awesome to Your Compile

Copy the scss folder into your project. Then copy the entire webfonts folder into your project, where your static files get served.

Open your project's scss/variables.scss and edit the $fa-font-path variable to point to where you placed the webfonts folder.

$fa-font-path: "../webfonts";

Import Font Awesome by adding @import "scss/fontawesome.scss" in your main SCSS file. Also, import one or more styles @import "scss/solid.scss" in your main SCSS file.

Ch-chigity Check Your Paths!

Make sure the font path and your webfonts directory are relative to where your compiled CSS will be located.

@import "./fontawesome/scss/fontawesome.scss";
@import "./fontawesome/scss/solid.scss";
@import "./fontawesome/scss/brands.scss";

<!-- for Duotones need both files -->
@import "./fontawesome/scss/duotones.scss";
@import "./fontawesome/scss/duotones-icons.scss";

Adding Icons

Once you've added the imports above, you can add icon styles, like this:

/* Solid style */
.user {
  @extend %fa-icon;
  @extend .fa-solid;

  &:before {
    content: fa-content($fa-var-user);
  }
}

/* Brand icon */
.twitter {
  @extend %fa-icon;
  @extend .fa-brands;

  &:before {
    content: fa-content($fa-var-twitter);
  }
}

You can use @include fa-icon; to get things set up as an icon. Use @extend .fa-solid; to create an icon in the Solid style. Import other styles to use other prefixes. Use fa-content and variable names to make including content values a little easier. Sass can be grumpy (or, you know, sassy) about this.

Autoprefixer is not included in v6!

For the sake of not being too prescriptive, we've removed Autoprefixer (opens new window) from our compile and build steps. If your project needs it, you'll need to add it yourself.

Advertisement

Hide Elements with Mixins

Utilities What It Does
fa-sr-only() A mixin that visually hides an element containing a text-equivalent for an icon while keeping it accessible to assistive technologies
fa-sr-only-focusable() A mixin that is used alongside fa-sr-only() to show the element again when it’s focused (e.g. by a keyboard-only user)
fa-icon() A mixin that contains all of the base style set up for an icon (minus an icon's style and specific name/unicode) compile
fa-content() A mixin to make referencing icons via the CSS content property a bit easier.

An icon's variable must be passed in (e.g. fa-content($fa-var-user);).

Simplify and Customize with Variables

Font Awesome's SCSS version also leverages several SCSS variables (opens new window) that allow for easier set-up and customization of our styling toolkit.

Variable What It Does
$fa-css-prefix Sets the prefix (default set to fa) used on all styling toolkit CSS rules (e.g. fa-lg) + icon reference classes (e.g. fa-user)
$fa-style Sets the default icon style (using @font-face weight)
$fa-style-family Sets the default font-family used
$fa-display Sets the display (opens new window) property (default set to inline-block) for rendered icons
$fa-font-display Sets the font-display (opens new window) property for Font Awesome's icon fonts
$fa-fw-width Sets the width (opens new window) property for all fixed-width icons
$fa-inverse Sets the color (opens new window) property of .fa-inverse
$fa-border-color Sets the border-color (opens new window) property used in bordered icons
$fa-border-padding Sets the padding (opens new window) property used in bordered icons
$fa-border-radius Sets the border-radius (opens new window) property used in bordered icons
$fa-border-style Sets the border-style (opens new window) property used in bordered icons
$fa-border-width Sets the border-width (opens new window) property used in bordered icons
$fa-li-width Sets the width (opens new window) property for fa-li elements when styling icons in a list icons
$fa-li-margin Sets the margin-right (opens new window) property for fa-li elements when styling icons in a list icons
$fa-pull-margin Sets the margin-left/margin-right (opens new window) property for pulled icons icons
$fa-primary-opacity Sets the opacity (opens new window) of a duotone icon's primary layer
$fa-secondary-opacity Sets the opacity (opens new window) of a duotone icon's secondary layer
$fa-size-scale-base Sets the base step size that all other relative sizing steps are based on
$fa-size-scale-2xs Sets the size of step used when relatively sizing icons with .fa-2xs
$fa-size-scale-xs Sets the size of step used when relatively sizing icons with .fa-xs
$fa-size-scale-sm Sets the size of step used when relatively sizing icons with .fa-sm
$fa-size-scale-lg Sets the size of step used when relatively sizing icons with .fa-lg
$fa-size-scale-xl Sets the size of step used when relatively sizing icons with .fa-xl
$fa-size-scale-2xl Sets the size of step used when relatively sizing icons with .fa-2xl
$fa-stack-vertical-align Sets the vertical-align (opens new window) property of stacked icons
$fa-stack-width Sets the width (opens new window) property of stacked icons
$fa-stack-z-index Sets the z-index (opens new window) property of stacked icons
$fa-font-path Sets the location of Font Awesome's webfonts folder and assets.

You're viewing the Version 6 Beta

It's all the awesome of 5, but now more six-y! Version 6 brings over 13,000 icons across 5 styles – including the new Thin style! – and includes more and faster services.

Get the Deets on Version 6

Head Back to Our Current Version 5 Release

Need a Hand?

If you’re stuck or have a question, check our Troubleshooting docs, all of the Font Awesome threads on Stack Overflow, or contact our community on GitHub.

Or get Real Human Support™ with a Pro Subscription!