You're viewing docs for v5.15.4, an older version of Font Awesome.

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

How's This Organized?

Here are some details on the mixins and files made specifically for SCSS.

Files What They Do
fontawesome.scss Main Font Awesome compile
brands.scss Brands icon styles
solid.scss Solid icon styles
regular.scss Regular icon styles
light.scss Light icon styles
duotone.scss Duotone icon styles
_core.scss Base icon reference class syntax and definition
_mixins.scss Utilities used throughout styling/icon definitions
_icons.scss All icon definitions
_variables.scss Where variables are defined that are used throughout styling
_animated.scss animated icon support styling
_bordered-pulled.scss bordered + pulled icon support styling
_fixed-width.scss fixed-width icon support styling
_larger.scss icon sizing support styling
_list.scss icons in a list support styling
_rotated-flipped.scss rotating icons support styling
_stacked.scss stacking icons support styling
_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. Compile your code and get to using those new icons in your project!

Watch those files paths!

You probably already know this, but we seem always to forget it. The font path is relative from your compiled CSS directory. Ensure that you place your webfonts directory in a place relative to where your final CSS will be located.

Using Our Mixins

You can use @include fa-icon; to get things set up as an icon. Use @extend .fas; 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.

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

  .user {
    @extend %fa-icon;
    @extend .fas;

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

  .twitter {
    @extend %fa-icon;
    @extend .fab;

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