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.
You'll need to add the
fa class and leave off any style classes from your icons, like this:
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:
Change the value of
--fa-style to match the style you want. Here's a handy reference:
|Style name ||Font Weight|
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:
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:
And then extend the
fa class to include the duotone classes:
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.
If you can’t add any attributes to a
<script> tag you can set the configuration like this:
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!