# Fast Style Switching

How to switch between different Font Awesome icon styles dynamically.

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

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

If you go
this route, you should be comfortable with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties">CSS Custom Properties</a> 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:

```html
<!-- 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:

```css
/* 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;
}
```

When using only the `fa` class on an icon reference, our styling toolkit will render
icons in [Classic Solid](https://fontawesome.com/search?ip=classic&s=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](https://fontawesome.com/search?ip=classic)             | [Free](https://fontawesome.com/search?ip=classic&ic=free) and [Pro](https://fontawesome.com/plans) Options | `--fa-family`       | `--fa-family-classic`       |
| [Duotone](https://fontawesome.com/search?ip=duotone)             | [Pro only](https://fontawesome.com/plans)                                                                  | `--fa-family`       | `--fa-family-duotone`       |
| [Sharp](https://fontawesome.com/search?ip=sharp)                 | [Pro only](https://fontawesome.com/plans)                                                                  | `--fa-family`       | `--fa-family-sharp`         |
| [Sharp Duotone](https://fontawesome.com/search?ip=sharp-duotone) | [Pro only](https://fontawesome.com/plans)                                                                  | `--fa-family`       | `--fa-family-sharp-duotone` |

Since they don't have parity in subject matter with our other styles, using Fast Style Switching to change to or from our [Brands](https://fontawesome.com/search?o=r&ic=brands&ip=brands) icons is not a good idea.

### 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](https://fontawesome.com/search?s=solid)     | Free Plan                                 | `--fa-style`        | `900`                          |
| [Regular](https://fontawesome.com/search?s=regular) | [Pro only](https://fontawesome.com/plans) | `--fa-style`        | `400`                          |
| [Light](https://fontawesome.com/search?s=light)     | [Pro only](https://fontawesome.com/plans) | `--fa-style`        | `300`                          |
| [Thin](https://fontawesome.com/search?s=thin)       | [Pro only](https://fontawesome.com/plans) | `--fa-style`        | `100`                          |

### Pro+ Icon Packs + Fast Style Switching

Each [Pro+ only icon pack](https://fontawesome.com/search??ic=pro-plus-collection) is considered "small batch" and does not have parity with categories or icons in [our larger Packs](https://fontawesome.com/icons?t=packs#packs). Instead they contain a curated selection of the 200 most common icons needed for app and website design.

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.

```css
/* 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](/web/dig-deeper/styles.md) 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.

```html
<!-- 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](https://sass-lang.com) alongside [our Font Awesome Sass](/web/use-with/scss.md) assets to get the Duotone style-switching job done.

Make sure you...

- [Downloaded the Font Awesome Web files](https://fontawesome.com/download) and have them handy.
- Have a project set up with [Sass](https://sass-lang.com) and [Font Awesome's Sass assets](/web/use-with/scss.md#get-set-up).
- 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](/web/use-with/scss.md#adding-font-awesome-to-your-compile). After doing so, your compile may look something like the following:

```scss
// 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:

```scss
// 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`](https://sass-lang.com/documentation/at-rules/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.

```scss
// 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.

```js
<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
<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](/web/dig-deeper/styles.md) released in Font Awesome.