Web

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...

Advertisement

Advanced Terrain Ahead!

This method is not for the faint of heart or front-end development. If you go this route, you will have to be committed - or be ready to add the style classes back to your icons if you change your mind.

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
Sharp Pro only --fa-style-family --fa-style-family-sharp

Font Awesome Sharp requires Pro and specific versions!

Make sure you have an active Pro-level plan or a Pro license with access to the specific versions that include Sharp's styles.

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
Duotone Pro only 900

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 Duotone

Duotone is a little special since it is made up of two parts. If you want to use 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

Advertisement

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.

Font Awesome Classic is Our Default Family

If you don't specify a data-family-default, our styling toolkit will render icons in Font Awesome Classic, the original look and feel that's always in style.

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

Advertisement

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!