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.

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

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;

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>

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 Version 7 (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