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.
Advertisement
Remove ads with a Pro plan!
Using this requires Font Awesome Pro
Pro
A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com.
And of course Pro-level plans come with…
All 16,083 Icons in Font Awesome
Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands
A Perpetual License to Use Pro
Services and Tools to Make Easy Work of Using Icons
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.
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.
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";
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. For instance, we'll import the Solid style with @import "scss/solid.scss". Compile your code and get to using those new icons in your project!
@import"./fontawesome/scss/fontawesome.scss";@import"./fontawesome/scss/solid.scss";@import"./fontawesome/scss/brands.scss";// for Duotones need both files@import"./fontawesome/scss/duotone.scss";@import"./fontawesome/scss/_duotone-icons.scss";
Ch-chigity Check Your Paths!
Make sure the font path and your webfonts directory are relative to where your compiled CSS will be located.
Autoprefixer is not included in v6!
For the sake of not being too prescriptive, we've removed Autoprefixer(opens new window) from our compile and build steps. If your project needs it, you'll need to add it yourself.
Here's an example of how to reference icons with your compiled and hosted CSS:
<head><!--load your compiled CSS (including Font Awesome) --><linkhref="/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 --><iclass="fa-solid fa-user"></i><!-- Or you can use a <span> element, with classes applied in the same way --><spanclass="fa-solid fa-user"></span></body>
SCSS Customizations at Your Command
Any changes to the Font Awesome SCSS variables (e.g. changing the fa- prefix or our sizing scales), will take effect in your project's compiled 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.
Using our @include fa-icon- style mixins, you can easily generate custom CSS Pseudo-element rules with CSS selectors specific to your project.
// Solid style of user.user {@includefa-icon-solid($fa-var-user);}// Duotone style of camera-retro.camera-retro {@includefa-icon-duotone($fa-var-camera-retro);}// Twitter brand icon.twitter {@includefa-icon-brands($fa-var-twitter);}
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.
These style mixins also handle the basic rendering styles that we bundle in our toolkit to make sure icons display perfectly in their context and in browsers.
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.
You can write @extend %fa-icon; and use the %fa-icon placeholder to set up a class with the foundation for using as an icon. Use @extend .fa-solid; to include the styling to render the icon in the Solid style. Importing other styles can be done similarly using other prefixes (e.g. .fa-regular). Similar in syntax to adding icons via pseudo-elements, use fa-content and variable names to make including an icon's Unicode values a little easier. Sass can be grumpy (or, you know, sassy) about this.
// Solid style of user icon.user {@extend%fa-icon;@extend .fa-solid;&:before {content:fa-content($fa-var-user);}}// Twitter brand icon.twitter {@extend%fa-icon;@extend .fa-brands;&:before {content:fa-content($fa-var-twitter);}}
Advertisement
Remove ads with a Pro plan!
Using this requires Font Awesome Pro
Pro
A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com.
And of course Pro-level plans come with…
All 16,083 Icons in Font Awesome
Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands
A Perpetual License to Use Pro
Services and Tools to Make Easy Work of Using Icons
Mixins that contain all of the base style set up for an icon along with a specific style to render the icon in
fa-content()
A mixin to make referencing icons via the CSS content property a bit easier. An icon's variable must be passed in (e.g. fa-content($fa-var-user);).
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.
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)