Need to look up a specific CSS class or Custom Property? Forgot what a specific style utility class does? Here’s a quick reference for everything included in Font Awesome’s styling toolkit.
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
Get Font Awesome Pro for only $99/yr
Class
Details
fa-1x
Changes an icon’s font-size to 1em
fa-2x
Changes an icon’s font-size to 2em
fa-3x
Changes an icon’s font-size to 3em
fa-4x
Changes an icon’s font-size to 4em
fa-5x
Changes an icon’s font-size to 5em
fa-6x
Changes an icon’s font-size to 6em
fa-7x
Changes an icon’s font-size to 7em
fa-8x
Changes an icon’s font-size to 8em
fa-9x
Changes an icon’s font-size to 9em
fa-10x
Changes an icon’s font-size to 10em
fa-2xs
Changes an icon’s font-size to 0.625em (~10px) and also vertically aligns icon
fa-xs
Changes an icon’s font-size to .75em (~12px) and also vertically aligns icon
fa-sm
Changes an icon’s font-size to 0.875em (~14px) and also vertically aligns icon
fa-lg
Changes an icon’s font-size to 1.25em (~120px) and also vertically aligns icon
fa-xl
Changes an icon’s font-size to 1.5em (~24px) and also vertically aligns icon
fa-2xl
Changes an icon’s font-size to 2em (~32px) and also vertically aligns icon
Class
Details
fa-fw
Changes an icon’s font-size to .75em
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…
Get Font Awesome Pro for only $99/yr
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…
Get Font Awesome Pro for only $99/yr
Class
Details
fa-spin
Makes an icon spin 360° clock-wise
fa-spin-pulse
Makes an icon spin 360° clock-wise in 8 incremental steps
fa-spin-reverse
When used in conjunction with fa-spin or fa-spin-pulse , makes an icon spin counter-clockwise
fa-beat
Makes an icon scale up and down
fa-fade
Makes an icon visually fade in and out using opacity
fa-flip
Makes an icon rotate about the Y axis
CSS Custom Property
Details
Accepted Values
—fa-animation-delay
Set an initial delay for animation
Any valid CSS animation-delay value
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…
Get Font Awesome Pro for only $99/yr
Class
Details
fa-border
Creates a border with border-radius and padding applied around an icons
CSS Custom Property
Details
Accepted Values
—fa-border-color
Set border color
Any valid CSS border-color value
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…
Get Font Awesome Pro for only $99/yr
Class
Details
fa-stack
Used on a parent HTML element of the two icons to be stacked
fa-stack-1x
Used on the icon which should be displayed at base size when stacked
fa-stack-2x
Used on the icon which should be displayed larger when stacked
fa-inverse
Inverts the color of the icon displayed at base size when stacked
CSS Custom Property
Details
Accepted Values
—fa-stack-z-index
Set z-index of a stacked icon
Any valid CSS z-index value
Class
Details
fa-swap-opacity
Swap the default opacity of each layer in a duotone icon (making an icon’s primary layer have the default opacity of 40% rather than its secondary layer)
CSS Custom Property
Details
Accepted Values
—fa-primary-color
Set primary layer color
Any valid CSS color value
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…
Get Font Awesome Pro for only $99/yr
Class
Details
fa-sr-only
Visually hides an element containing a text-equivalent for an icon while keeping it accessible to assistive technologies
fa-sr-only-focusable
Used alongside fa-sr-only to show the element again when it’s focused (e.g. by a keyboard-only user)
Power Transforms are available only when using the SVG+JS framework. All grow, shrink, and positioning utilities accept arbitrary values (including decimals). Their units are 1/16em each.
HTML data- Attribute
Details
data-fa-transform=»shrink-[value]»
Shrinks an icon
data-fa-transform=»grow-[value]»
Grows an icon
data-fa-transform=»up-[value]»
Moves an icon up
data-fa-transform=»right-[value]»
Moves an icon right
data-fa-transform=»down-[value]»
Moves an icon down
data-fa-transform=»left-[value]»
Moves an icon left
data-fa-transform=»rotate-[angle]»
rotates an icon by a specific degree (with negative numbers allowed)
data-fa-transform=»flip-h»
mirrors an icon horizontally
data-fa-transform=»flip-v»
mirrors icon vertically
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…
Get Font Awesome Pro for only $99/yr
CSS Custom Property
Details
—fa-font-solid
Sets the font property to use the solid style ( font-family and font-weight ) in pseudo-element custom CSS rules
—fa-font-regular
Sets the font property to use the regular style ( font-family and font-weight ) in pseudo-element custom CSS rules
—fa-font-light
Sets the font property to use the solid style ( font-family and font-weight ) in pseudo-element custom CSS rules
—fa-font-thin
Sets the font property to use the thin style ( font-family and font-weight ) in pseudo-element custom CSS rules
—fa-font-duotone
Sets the font property to use the duotone style ( font-family and font-weight ) in pseudo-element custom CSS rules
—fa-font-brands
Sets the font property to use the brands style ( font-family and font-weight ) in pseudo-element custom CSS rules
—fa-font-sharp-solid
Sets the font property to use the sharp familiy and solid style ( font-family and font-weight ) in pseudo-element custom CSS rules
—fa-font-sharp-regular
Sets the font property to use the sharp familiy and regular style ( font-family and font-weight ) in pseudo-element custom CSS rules
—fa-font-sharp-light
Sets the font property to use the sharp familiy and light style ( font-family and font-weight ) in pseudo-element custom CSS rules
Let’s run through how to upgrade to Version 6 when rendering icons using CSS Pseudo-elements.
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…
Get Font Awesome Pro for only $99/yr
To help with backward compatibility, we’ve made a few important changes to how Font Awesome supports working with Pseudo-elements.
We now recommend defining the CSS font properties using our provided CSS Custom Properties. This will help make upgrading to future versions even easier.
We’ve made sure that Version 4 and Version 5 icon unicode values map to the proper icon in Version 6.
We now include a @font-face shim in our Web Fonts version of Font Awesome by default. This shim handles pointing to the proper Version 6 Web Font files for you.
You’ll want to make sure your Pseudo-element CSS rules are referencing Font Awesome 6 assets. As such, double-check that you’ve updated your kit’s settings, hosted assets, managed packages, or plugins/components to use Font Awesome 6
Backward Compatibilty with Older Versions
As part of our backward compatibility features, Font Awesome 6 now includes @font-face shims to map v4/v5 unicode values to their v6 counterparts — any existing Version 5 Pseudo-element rules should automatically translate to render Version 6 icons.
These are included and automatically loaded in Version 6-based kits. If you are hosting Web Fonts or SVG-based files yourself, check out how and when to include them manually.
And remember to make sure your custom CSS rules include the correct weight and Unicode value for each icon.
Updating Font Rule Syntax
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…
Get Font Awesome Pro for only $99/yr
By completing this optional step, you can ensure that your Pseudo-element custom CSS is current and bulletproof for future upgrades. A Version 5 Pseudo-element definition looked like this.
/* Old Version 5 CSS - Common properties to render all icons */.icon::beforedisplay: inline-block;font-style: normal;font-variant: normal;text-rendering: auto;-webkit-font-smoothing: antialiased;>/* Old Version 5 CSS - For referencing individual icons */.login::beforefont-family:"Font Awesome 5 Free";font-weight: 900;content:"\f007";>.tps::beforefont-family:"Font Awesome 5 Free";font-weight: 400;content:"\f1ea";>
We’ve moved a lot of complexity, such as the font -centric common properties as well as font-family and font-weight into our provided CSS Custom Properties. Let’s change the above custom CSS to use Version 6’s syntax. We’ll do the following:
Remove any font -minded properties from the common properties rule
Use custom properties-based font value to define an icon’s style
/* New Simplified Version 6 CSS *//* Step 1: Common Properties: All required to make icons render reliably */.icon::before/* removed font- based rules */display: inline-block;text-rendering: auto;-webkit-font-smoothing: antialiased;>/* Step 2: Reference Individual Icons */.login::before/* using style CSS custom property */font:var(--fa-font-solid);content:"\f007";>/* Note: Make sure to include the correct weight and Unicode value for the icon */.tps::before/* using style CSS custom property */font:var(--fa-font-solid);content:"\f1ea";>
You’re All Set!
Your project will now load Version 6 and render any existing icons using our newest and freshest icons and options. Are you running into trouble? Check out our troubleshooting guide for answers to common questions about using Font Awesome on the Web.
You might want to go check out the big pile of new icons we’ve added in Version 6, including the new Sharp Family and Thin Style, or check out all of Version 6’s new styling options.