Fast Style Switching

Have you ever wanted to be like Superman and change your look by jumping in a phone booth for a minute? Well, now you can! Or at least with your icons…

Advanced Terrain Ahead!

This method is not for the faint of fa-heart or front-end development.

If you go this route, you should be comfortable with CSS Custom Properties and be committed to a specific icon reference syntax - or be ready to add the style classes back to your icons if you change your mind.

On the Web, you can quickly swap the global default style you use for your site or app. Here’s how to set your project up to do that.

Only Add the fa Class to Your Icon References

You’ll need to add the fa class and leave off any style classes from your icons, like this:

<!-- add `fa` and leave off style classes -->
<i class="fa fa-mask"></i>

Fast Style Switching with Web Fonts

To switch between any of the core Font Awesome styles or families, you’ll set a couple of CSS custom properties on the :root in your app or site’s CSS, like this:

/* For Classic Solid */
:root {
  --fa-family: var(--fa-family-classic);
  --fa-style: 900;
}

/* For Sharp Solid */
:root {
  --fa-family: var(--fa-family-sharp);
  --fa-style: 900;
}

Default Family + Style Icon References

When using only the fa class on an icon reference, our styling toolkit will render icons in Classic Solid by default.

Change Icon Family

You can easily change the family of icons you want your project to use by setting the --fa-family CSS custom property. Here are the current Font Awesome families:

Family	Availability	CSS Custom Property	Accepted Values
Classic	Free and Pro Options	--fa-family	--fa-family-classic
Duotone	Pro only	--fa-family	--fa-family-duotone
Sharp	Pro only	--fa-family	--fa-family-sharp
Sharp Duotone	Pro only	--fa-family	--fa-family-sharp-duotone

Change Icon Style

To change to a specific style of icons in a family, use the --fa-style CSS custom property to match the font weight you want. Here’s a handy reference:

Style	Availability	CSS Custom Property	Accepted Values (font-weights)
Solid	Free Plan	--fa-style	900
Regular	Pro only	--fa-style	400
Light	Pro only	--fa-style	300
Thin	Pro only	--fa-style	100

Pro+ Icon Packs + Fast Style Switching

Each Pro+ only icon pack is considered “small batch” and does not have parity with categories or icons in our larger Packs. Instead they contain a curated selection of the 200 most common icons needed for app and website design.

Switching from large to small batch styles isn't recommended!

Pro+ small batch styles’ limited icon count means that they don’t have all the icons that exist in the larger families. And their style names and weights may vary as well. Both of these differences mean that icons may not render properly or at all when fast style switching.

Overriding Styles

You can override styles set via CSS Custom Properties (intentionally or inadvertently) in a couple of ways.

Setting a new CSS Custom Property Value

You can set a new value for either --fa-family or --fa-style in a new CSS rule that targets a specific element in your HTML.

/* Classic Regular by default  */
:root {
  --fa-family: var(--fa-family-classic);
  --fa-style: 400;
}

/* Use Sharp Regular in Navigation */
.navigation {
  --fa-family: var(--fa-family-sharp);
  /* inherits --fa-style from :root */
}

/* Use Classic Solid in Buttons */
.button {
  /* inherits --fa-family from :root */
  --fa-style: 900;
}

Setting a Style Class

If you set a style class attribute on an icon reference’s HTML element in addition to the fa default, the style class will override any :root-based CSS Custom Property definitions.

<!-- with just the default `fa` -->
<i class="fa fa-mask"></i>

<!-- with the default `fa` and the `fa-regular` style -->
<i class="fa fa-regular fa-mask"></i>

Setting your default to a Duotone Family

Duotone icons are a little special since they are made up of two layers (and when rendering using Web Fonts, two pseudo-elements). If you want to use Duotone or Sharp Duotone as your default we highly recommend that you use a CSS Preprocessor like Sass alongside our Font Awesome Sass assets to get the Duotone style-switching job done.

Before You Get Started

Make sure you…

• Downloaded the Font Awesome Web files and have them handy.
• Have a project set up with Sass and Font Awesome’s Sass assets.
• Are familiar with Sass’s modern syntax and features such as @use, mixins, variables, and namespacing

Set Up Your Compile

Make sure you follow the steps to add Font Awesome to your compile. After doing so, your compile may look something like the following:

// customize variables
@use './fontawesome/variables' with (
  // customizing $font-path (if needed)
  $font-path: '../webfonts',
);

// load Font Awesome core
@use './fontawesome/fontawesome';

// load  Font Awesome helpers (mixins, functions, and variables) and make available via @forward
@use './fontawesome/fa' as fa;

// load Classic Duotone style
@use './fontawesome/duotone.scss' as fa-duotone;

Set Custom Properties at the :root

Next, add a :root-based rule to your Sass that sets the --fa-family to Classic Duotone’s value (--fa-family-duotone), like so:

// customize variables
@use './fontawesome/variables' with (
  // customizing $font-path (if needed)
  $font-path: '../webfonts',
);

// load Font Awesome core
@use './fontawesome/fontawesome';

// load  Font Awesome helpers (mixins, functions, and variables) and make available via @forward
@use './fontawesome/fa' as fa;

// load Classic Duotone style
@use './fontawesome/duotone.scss' as fa-duotone;

// set --fa-family to Classic Duotone
:root {
  --fa-family: var(--fa-family-duotone);
  --fa-style: 900;
}

Extend Extra CSS Needed to Render Duotone Icons

Lastly, you’ll need to get additional Font Awesome CSS to support rendering the two layers of Duotone icons. To do that, add a rule that targets the general .fa class and use a Sass @extend to copy the .fa-duotone styling to this rule.

Instead of directly referencing .fa-duotone, you should also use our Sass’s $css-prefix variable in this step - which will make sure this rule supports any custom prefix changes in your variables.

// customize variables
@use './fontawesome/variables' with (
  // customizing $font-path (if needed)
  $font-path: '../webfonts',
);

// load Font Awesome core
@use './fontawesome/fontawesome';

// load  Font Awesome helpers (mixins, functions, and variables) and make available via @forward
@use './fontawesome/fa' as fa;

// load Classic Duotone style
@use './fontawesome/duotone.scss' as fa-duotone;

// set --fa-family to Classic Duotone
:root {
  --fa-family: var(--fa-family-duotone);
  --fa-style: 900;
}

// adding the Classic Duotone-based CSS to the general .fa class to support rendering two layer icons with just this class
.fa {
  @extend .#{fa.$css-prefix}-duotone;
}

Fast Style Switching with SVG+JS

In order to use fast switching with SVG+JS you’ll need to set the data-style-default and data-family-default config setting to whichever style you want to make default.

If you’re using a <script> tag you’ll set the data-style-default and data-family-default setting in the tag.

<script src="path_to_fontawesome_javascript" data-style-default="desired_style" data-family-default="desired_family"></script>

// For example, a default classic light style will look like this
<script src="path_to_fontawesome_javascript" data-style-default="light" data-family-default="classic"></script>

// Another example, a default sharp solid style will look like this
<script src="path_to_fontawesome_javascript" data-style-default="solid" data-family-default="sharp"></script>

If you can’t add any attributes to a <script> tag, you can create a configuration object. Make sure you do this before loading the Font Awesome scripts, like this:

<html>
  <head>
    <script>
      // The settings you provide will be merged with the default settings
      FontAwesomeConfig = {
        styleDefault: 'light',
        familyDefault: 'classic'
      }
    </script>
    <script src="path_to_fontawesome_javascript"></script>
  </head>
  <body></body>
</html>

Now you’re set to switch over to any of the styles released in Font Awesome.