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.
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
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|
|Main Font Awesome compile|
|Brand icon styles|
|Solid icon styles|
|Regular icon styles|
|Light icon styles|
|Thin icon styles|
|Sharp Solid icon styles|
|Duotone icon styles|
|Duotone icon classes|
|Where variables are defined that are used throughout styling|
|Utilities used throughout styling/icon definitions|
|Base icon reference class syntax and definition|
|icon sizing support styling|
|fixed-width icon support styling|
|icons in a list support styling|
|bordered + pulled icon support styling|
|animated icon support styling|
|rotating icons support styling|
|stacking icons support styling|
|All icon definitions|
|screen-reader specific and accessibility support styling|
Adding Font Awesome to Your Compile
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
In your main SCSS compile file, import Font Awesome by adding the core styles file,
@import "scss/fontawesome.scss". Then import one or more styles.
Here's a simple example:
If you wanted to use more styles, add more style imports:
Using Duotone Icons
If a project uses Duotone icons, you'll need to
@import two separate files.
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:
Custom SCSS-based CSS Rules
If you want to use any of our SCSS mixins or utilities, you can leverage our CSS Pseudo-elements method of adding icons to your project to do. This method is also useful when changing the HTML on your project is not an option.
@include fa-icon- and
@include fa-family- mixins, you can easily generate custom CSS Pseudo-element rules with CSS selectors specific to your project.
To use the style mixins, you'll want to:
- Choose the right mixin for your desired style.
- Pass in the SCSS variable for the icon you want to display.
If you're using our mixins to render an icon in a specific family, like our Sharp family of styles, you'll need to reference the right family mixin (e.g.
@include fa-family-sharp). Classic is our default family of styles, so there's no need to set it with a family mixin unless you're trying to explicitly set to override a previous family.
|Family Mixin ||Availability ||What Style Renders|
|Free Plan ||Classic when used with other style mixins|
|Pro only ||Sharp when used with other style mixins|
A More Manual Custom CSS Approach
If you'd rather a more customizable approach when right your styling rules, we've made the utilties used in the style mixins available to get the same rendering results.
To write manual rules, you'll want to:
- Get the core set up styling of icons by adding
@extend .fa-solid; to include the styling to render the icon in the Solid style (similar syntax for other styles)
@extend .fa-classic; or
@extend .fa-sharp; to include the styling to render the icon in a specific family (Classic is set by default)
fa-content and variable names to make including an icon's Unicode values a little easier. This is similar in syntax to adding icons via pseudo-elements
|Utilities ||What It Does|
|A mixin that visually hides an element containing a text-equivalent for an icon while keeping it accessible to assistive technologies|
|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)
|A mixin that contains all of the base style set up for an icon (minus an icon's style and specific name/unicode) compile|
|Mixins that contain all of the base style set up for an icon along with a specific style to render the icon in|
|Mixins that, when combined with |
fa-icon- style mixins, define the family of styles to be used.
|A mixin to make referencing icons via the CSS |
content property a bit easier.
An icon's variable must be passed in (e.g.
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.