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

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;
}

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:

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:

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.

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.

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.