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
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
All 26,233 icons in Font Awesome
5 Classic styles of every icon
3 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
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 --><iclass="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:
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` --><iclass="fa fa-mask"></i><!-- with the default `fa` and the `fa-regular` style --><iclass="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:
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><scriptsrc="path_to_fontawesome_javascript"></script></head><body></body></html>
More Styles Coming Soon in v6
Advertisement
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
All 26,233 icons in Font Awesome
5 Classic styles of every icon
3 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons