Our styling toolkit provides a lot of utility, including size, rotate, stack, and animate icons. Using the CSS custom properties(opens new window) below, we've added easy ways to customize aspects of our styling toolkit's features.
You can define custom properties at CSS :root pseudo-class(opens new window) level. This will make any icons that use a styling toolkit's feature inherit the properties by default.
<!-- by default, everything will be in v6's Classic regular style and in the holiday spirit --><style>:root{--fa-style-family:"Font Awesome 6 Pro";--fa-style: 400;--fa-border-color: red;--fa-primary-color: green;--fa-secondary-color: red;}</style>
Setting Properties with Project-Based CSS Rules
You can also set custom properties inside of your project's CSS, in the <head> of a page or in a separate stylesheet. These properties will be scoped to just elements that match the selector of the rule you've included them in.
<style>/* setting a decorative icon dropcap before a block of text */.ye-olde-icon-dropcap{--fa-border-color: WhiteSmoke;--fa-border-padding: 2em;--fa-border-radius: 0.25em;--fa-pull-margin: 2em;font-size: 8em;}/* playing DJ with fa-record-vinyl */.track-quick-spin{--fa-spin-duration: 0.25s;--fa-spin-iteration-count: 1;--fa-spin-timing: ease-out;}.track-vocals{--fa-spin-duration: 10s;--fa-spin-timing: ease-in-out;--fa-spin-iteration-count: 2;}.track-dope-hook{--fa-spin-duration: 10s;--fa-spin-iteration-count: 10;}/* Mo' Malfoy! Mo' Malfoy! Mo' Malfoy! */.theme-slytherin{--fa-primary-color: darkgreen;--fa-secondary-color: silver;}/* extra sharp flavor */.theme-sharp{font:var(--fa-font-sharp-solid);}</style>
Setting Properties with Inline Styles
Many of the examples in these docs define CSS custom properties using inline styling by adding a style attribute to an element. This is best for one-offs or very custom colored/styled duotone icons that you won't need to change at a system level.
<!-- rotating an icon --><iclass="fa-solid fa-bomb fa-rotate-by"style="--fa-rotate-angle: 45deg;"></i><!-- using inline styles to define duotone icon custom properties --><iclass="fa-duotone fa-crow"style="--fa-primary-color: dodgerblue;--fa-secondary-color: gold;"></i>
Be careful of specificity and cascade!
CSS Custom properties that are redefined will trump each other. Defining a property in :root {} and then defining the same property in a rule or inline will result in the :root style being overridden.
Add Your Own Custom Styling with CSS
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 30,013 icons in Font Awesome
5 Classic styles of every icon
4 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
Everything you can typically control with CSS is up for grabs — from color to display to alignment. We recommend targeting icons in your CSS in a couple of different ways. You can also add your own custom styling to Font Awesome icons by adding your own CSS rules in your project's code.
Styling Case
Recommended Selector
Custom styling all icons
Add a consistent custom class to all icons (e.g. .icon, .[projectprefix]-icon, or .fa-icon)
You can also use style-classes for the in-use icon styles .fa-solid { ... } .fa-regular { ... } .fa-light { ... } .fa-thin { ... } .fa-duotone { ... } .fa-brands { ... } .fa-sharp-solid { ... }
Custom styling a specific icon
Use the individual icon name, prefixed with .fa- .fa-user { ... } .fa-font-awesome { ... }
Here's a quick example of using those selectors to add custom color to Font Awesome icons:
<!-- reference your copy of Font Awesome in the head --><head><linkhref="/your-path-to-fontawesome/css/fontawesome.css"rel="stylesheet"><linkhref="/your-path-to-fontawesome/css/brands.css"rel="stylesheet"><linkhref="/your-path-to-fontawesome/css/solid.css"rel="stylesheet"><linkhref="/your-path-to-fontawesome/css/sharp-solid.css"rel="stylesheet"></head>
<!-- Add some style --><style>/* custom styling for all icons */.fa-solid,
.fa-brands,
.fa-sharp-solid{background-color: papayawhip;border-radius: 0.2em;padding: 0.3em;}/* custom styling for specific icons */.fa-fish{color: salmon;}.fa-frog{color: green;}.fa-user-ninja.vanished{opacity: 0.2;}.fa-facebook{color:rgb(59, 91, 152);}</style><!-- Add some Icons --><body><iclass="fa-solid fa-fish"></i><iclass="fa-solid fa-frog"></i><iclass="fa-solid fa-user-ninja vanished"></i><iclass="fa-brands fa-facebook"></i><iclass="fa-sharp fa-solid fa-fish"></i></body>
Writing Custom CSS with our SVG + JS framework
When using our SVG framework, remember that Font Awesome-based <i> DOM elements are replaced with new <svg> elements by default. Be sure that your CSS rules target the right elements.