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|
|Duotone icon styles|
|Solid icon styles|
|Regular icon styles|
|Light icon styles|
|Thin icon styles|
|Duotone icon styles|
|Where variables are defined that are used throughout styling|
|Utilities used throughout styling/icon definitions|
|Base icon reference class syntax and definition|
|Duotone icon classes|
|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
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.
Once you've added the imports above, you can add icon styles, like this:
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.
Hide Elements with Mixins
|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|
|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.