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

Setting your default to Solid, Regular, Light, or Thin

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

:root {
  --fa-style-family: "Font Awesome 6 Pro";
  --fa-style: 900;
}

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

Style name Font Weight
Solid 900
Regular 400
Light 300
Thin 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>
Advertisement

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: "Font Awesome 6 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);
}
Advertisement

Fast Style Switching with SVG+JS

In order to use fast switching with SVG+JS you'll need to set the data-style-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 setting in the tag.

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

// For example, a default light style will look like this
<script src="path_to_fontawesome_javascript" data-style-default="fa-light"></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: "fa-light"
      }
    </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!

You're viewing the Version 6 Beta

It's all the awesome of 5, but now more six-y! Version 6 brings over 13,000 icons across 5 styles – including the new Thin style! – and includes more and faster services.

Get the Deets on Version 6

Head Back to Our Current Version 5 Release

Need a Hand?

If you’re stuck or have a question, check our Troubleshooting docs, all of the Font Awesome threads on Stack Overflow, or contact our community on GitHub.

Or get Real Human Support™ with a Pro Subscription!