Sass (SCSS)

Are you using Sass 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.

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 scss 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
_animated.scss animated icon support styling
_bordered.scss bordered icon support styling
_pulled.scss pulled icon support styling
_core.scss Base icon reference class syntax and definition
_widths.scss Icon Canvas width support styling
_icons.scss All icon definitions
_list.scss icons in a list support styling
_mixins.scss Utilities used throughout styling/icon definitions
_rotated-flipped.scss rotating icons support styling
_sizing.scss icon sizing support styling
_stacked.scss stacking icons support styling
_variables.scss Where variables are defined that are used throughout styling
_custom-icons.scss includes custom icons in a Kit Download (if you're using one)
Individual icon style partials Support styling and configuration for each icon style

Compatibility

Font Awesome's SCSS can be compiled with Sass and Dart Sass. We tend to stick to the latest versions of both compilers when possible.

Both node-sass and libsass are officially deprecated and are not actively supported.

Adding Font Awesome to Your Compile

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

In your main SCSS compile file, you'll want to do the following things:

Customize Font Awesome Variables

Any Font Awesome variable defined in the _variables.scss can be overriden when you load it using the @use rule. You'll want to override the $font-path variable to point to where you placed the webfonts folder.

@use './fontawesome/variables' with (
  // customizing $font-path - make sure it points to where your webfonts are stored in your project
  $font-path: '../webfonts'
);

Load Font Awesome's Core

Next, load Font Awesome's Core styling and make Font Awesome's helpers (mixins, functions, and variables) available via the _fa.scss partial which leverages Sass's @forward rule.

// customize variables
@use './fontawesome/variables' with (
  // customizing $font-path - make sure it points to where your webfonts are stored in your project
  $font-path: '../webfonts'
);

// load Font Awesome core
@use './fontawesome/fontawesome';

// load and make available Font Awesome helpers (mixins, functions, and variables)
@use './fontawesome/fa' as fa;

Load Individual Styles

Each icon style is available via an individual SCSS partial. Adds the files for the icon styles you plan to use in your project.

// customize variables
@use './fontawesome/variables' with (
  // customizing $font-path
  $font-path: '../webfonts'
);

// load Font Awesome core
@use './fontawesome/fontawesome';

// load and make available Font Awesome helpers (mixins, functions, and variables)
@use './fontawesome/fa' as fa;

// load individual Font Awesome styles - add only the ones you plan to use in your project. Here is an example of a project using Classic Solid, Brands, Duotone Solid, and Sharp Duotone Solid icons...
@use './fontawesome/solid' as fa-solid;
@use './fontawesome/brands' as fa-brands;
@use './fontawesome/duotone' as fa-duotone;
@use './fontawesome/sharp-duotone' as fa-sharp-duotone;

Namespacing + Font Awesome Sass

Modern Sass practices recommend using a namespace with the @use rule. We recommend following our examples above and namespacing any loaded partials with fa. Whatever you choose, remember to reference it properly when calling variables, mixins, functions, etc.

Ch-chigity Check Your Paths!

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

Adding Icons

Once you've added the imports above and have your compiled CSS that includes Font Awesome set up and referenced in your project, you can add icons to your project's HTML.

Here's an example of how to reference icons with your compiled and hosted CSS:

<head>
  <!--load your compiled CSS (including Font Awesome) -->
  <link href="/your-path-to-your-compiled-css-including-fontawesome/file.css" rel="stylesheet" />
</head>
<body>
  <!-- This example uses <i> element with:
  1. the `fa-solid` style class for solid style
  2. the `user` icon with the `fa-` prefix -->
  <i class="fa-solid fa-user"></i>

  <!-- Or you can use a <span> element, with classes applied in the same way -->

  <span class="fa-solid fa-user"></span>
</body>

SCSS Customizations at Your Command

Any changes to the Font Awesome SCSS variables (e.g. changing the $css-prefix prefix variable or our sizing scales), will take effect in your project's compiled CSS.

Writing Custom Sass/SCSS

If you are writing custom styling in the same file as your compile, you can use the namespaced fa partial to leverage the Font Awesome variables, mixins, and utilities like so:

// CASE: your main compile file

// load Font Awesome core
@use './fontawesome/fontawesome';

// load and make available Font Awesome helpers (mixins, functions, and variables)
@use './fontawesome/fa' as fa;

// the rest of your custom Sass/SCSS...

In Partials

If you are writing custom styling in other partials that your main compile is loading, you'll need to load the Font Awesome variables, mixins, and utilities yourself in the file that requires any of them.

// CASE: partial file that your main compile loads

// load  Font Awesome helpers (mixins, functions, and variables) as needed
@use './fontawesome/variables' as fa-v;
@use './fontawesome/mixins' as fa-m;
@use './fontawesome/functions' as fa-f;

// the rest of your partial's custom Sass/SCSS...

Using Variables

Once loaded, you can use any of Font Awesome's variables in your custom rules.

Main Compile Partial 
// load Font Awesome core
@use './fontawesome/fontawesome';

// load and make available Font Awesome helpers (mixins, functions, and variables)
@use './fontawesome/fa' as fa;

// custom rules
.same-width-as-fa-icons {
  // using Font Awesome's fa-width variable to set the width of an element
  width: fa.$fw-width;
}

// load Font Awesome variables
@use './fontawesome/variables' as fa-v;

// custom rules
.same-width-as-fa-icons {
  // using Font Awesome's fa-width variable to set the width of an element
  width: fa-v.$fw-width;
}

Using Mixins + Functions

Once loaded, you can use any of Font Awesome's mixins in your custom rules.

Main Compile Partial 
// load Font Awesome core
@use './fontawesome/fontawesome';

// load and make available Font Awesome helpers (mixins, functions, and variables)
@use './fontawesome/fa' as fa;

// custom rules
.size-same-as-xl-icon {
  // using Font Awesome's fa-size mixin to set the font-size of an element to the xl scale value
  @include fa.fa-size(xl);
}

// load Font Awesome variables and mixins
@use './fontawesome/variables' as fa-v; // needed because mixins use variables
@use './fontawesome/mixins' as fa-m;

// custom rules
.size-same-as-xl-icon {
  // using Font Awesome's fa-size mixin to set the font-size of an element to the xl scale value
  @include fa-m.fa-size(xl);
}

Using Individual Style Mixins

One of the more common cases for writing custom Sass/SCSS is to handle rendering icons using CSS pseudo-elements. This method is also useful when changing the HTML on your project is not an option.

Each individual style you load into your project's compile includes a specific icon() mixin. These mixins handle the basic rendering that we bundle in our toolkit to make sure icons display perfectly. Along with that, they generate rules to render icon in the individual family + style.

Here's an example building off of previous code snippets:

// CASE: your main compile file

// customize variables
@use './fontawesome/variables' with (
  // customizing $font-path
  $font-path: '../webfonts'
);

// load Font Awesome core
@use './fontawesome/fontawesome';

// load and make available Font Awesome helpers (mixins, functions, and variables)
@use './fontawesome/fa' as fa;

// load individual Font Awesome styles
@use './fontawesome/solid' as fa-solid;
@use './fontawesome/regular' as fa-regular;
@use './fontawesome/light' as fa-light;
@use './fontawesome/thin' as fa-thin;
@use './fontawesome/duotone' as fa-duotone-solid;
@use './fontawesome/brands' as fa-brands;
@use './fontawesome/sharp-solid' as fa-sharp-solid;

// Solid style of user
.user {
  @include fa-solid.icon(fa.$var-user);
}

// Regular style of triangle-exclamation
.triangle-exclamation {
  @include fa-regular.icon(fa.$var-triangle-exclamation);
}

// Light style of newspaper
.newspaper {
  @include fa-light.icon(fa.$var-newspaper);
}

// Thin style of paintbrush-fine
.paintbrush-fine {
  @include fa-thin.icon(fa.$var-paintbrush-fine);
}

// Duotone style of camera-retro
.camera-retro {
  @include fa-duotone-solid.icon(fa.$var-paintbrush-fine);
}

// Sharp Solid style of trash
.trash {
  @include fa-sharp-solid.icon(fa.$var-trash);
}

// Bluesky brand icon
.bluesky {
  @include fa-brands.icon(fa.$var-bluesky);
}

Using a Downloaded Kit

Did you know you can download a Kit to compile and host yourself just like you do with Font Awesome? To download your Kit, make sure the Kit's version in Settings is set to use v7 (or if you selected a specific version, it needs to be at least 6.4). Then from the Set Up tab in your Kit, you'll see the options for downloading. Your Kit download will contain all of the SCSS files noted above.

Custom Icons in Downloaded Kits

If you have custom icons in your Kit, they will be included as an additional files in your Kit download.

Path to the files What the files do
/webfonts/custom-icons.woff2 Custom icon font in WOFF2 format
/scss/_custom-icons.scss Sass (SCSS) Preprocessor partial that handles the display of custom icons using Web Fonts

Here's a simple example that follows the compile steps above along with custom icons:

// customize variables
@use './fontawesome/variables' with (
  // customizing $font-path
  $font-path: '../webfonts'
);

// load Font Awesome core
@use './fontawesome/fontawesome';

// load and make available Font Awesome helpers (mixins, functions, and variables)
@use './fontawesome/fa' as fa;

// load individual Font Awesome styles that you plan to use in your project
@use './fontawesome/solid' as fa-solid;
@use './fontawesome/brands' as fa-brands;
@use './fontawesome/duotone' as fa-duotone;
@use './fontawesome/sharp-duotone' as fa-sharp-duotone;

// load your custom icons
@use './fontawesome/custom-icons' as fa-custom-icons;

Variables

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

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

Mixins and Functions

Font Awesome's SCSS leverages a small amount of mixins and functions to help render icons.

Utility What It Does Arguments
fa-icon() Produces all of the base style set up for an icon's rendering, plus configuration for a specific icon family and style $family — any valid font-family value
fa-size() Relatively adjusts the size of an icon using Font Awesome's relative sizing styling and scale $font-size — any valid size value from the relative sizing scale
fa-content() A function to make referencing icons via the CSS content property a bit easier $var — Any valid icon-based variable (e.g. fa-content($fa-var-user);)
icon() found in individual icon style partials Individual Style-only mixins that produce all the base style set up for an icon's rendering, plus configuration for a specific icon family and style. N/A - family and style are set explicitly with these
    No results