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…

Now with Version 6, 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.

Add the `fa` class

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-style-family: var(--fa-style-family-classic);
  --fa-style: 900;
}

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

Change Icon Family

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

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

Change Icon Style

To change to a specific style of icons in a family, use the --fa-style CSS custom property.

Change the value of --fa-style to match the font weight you want. Here’s a handy reference:

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

Note: The fa class is initially set to default to the solid style.

If you set a style on an icon in addition to the fa default, the style will override that default. Here’s an example:

<!-- 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 is made up of two parts. If you want to use Duotone or Sharp Duotone as your default you’ll need to use a preprocessor like Sass or Less.

Add the root CSS variables but set the --fa-style-family to Duotone, like this:

:root {
  --fa-style-family: var(--fa-style-family-duotone);
  --fa-style: 900;
}

And then extend the fa class to include the duotone classes:

With Sass

.fa {
  @extend .fa-duotone;
}

With Less

.fa {
  &:extend(.fa-duotone all);
}

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 set the configuration 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>

More Styles Coming Soon in v6

Now you’re set to switch over to any of the new styles we release with Version 6. Check out all the style options available. Pretty super!