Are you using SCSS as a CSS pre-processor in your project? No problemo, Font Awesome has an SCSS version if you'd prefer to import our styling into your workflow.
You'll find everything you need in the fontawesome6 directory of the alpha zip. 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 |
_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 |
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!
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";
.user {
@extend %fa-icon;
@extend .fa-solid;
&:before {
content: fa-content($fa-var-user);
}
}
.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.
| 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 assisitive 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 more easyAn icon's variable must be passed in (e.g. fa-content($fa-var-user);). |
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 |
|---|---|
$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 property (default set to inline-block) for rendered icons |
$fa-font-display | Sets the font-display property for Font Awesome's icon fonts |
$fa-fw-width | Sets the width property for all fixed-width icons |
$fa-inverse | Sets the color property of .fa-inverse |
$fa-border-color | Sets the border-color property used in bordered icons |
$fa-border-padding | Sets the padding property used in bordered icons |
$fa-border-radius | Sets the border-radius property used in bordered icons |
$fa-border-style | Sets the border-style property used in bordered icons |
$fa-border-width | Sets the border-width property used in bordered icons |
$fa-li-width | Sets the width property for fa-li elements when styling icons in a list icons |
$fa-li-margin | Sets the margin-right property for fa-li elements when styling icons in a list icons |
$fa-pull-margin | Sets the margin-left/margin-right property for pulled icons icons |
$fa-primary-opacity | Sets the opacity of a duotone icon's primary layer |
$fa-secondary-opacity | Sets the opacity 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 property of stacked icons |
$fa-stack-width | Sets the width property of stacked icons |
$fa-stack-z-index | Sets the z-index property of stacked icons |
$fa-font-path | Sets the location of Font Awesome's webfonts folder and assets. |