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.
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 Fresh icons, features, and software updates Plus support from real humans
Already have a Pro Plan?
Sign in
General Class Details fa-inverseInverts the color of an icon to white
CSS Custom Property Details Accepted Values --fa-style-familySet Font Awesome icon family "Font Awesome 6 Free""Font Awesome 6 Pro""Font Awesome 6 Duotone""Font Awesome 6 Brands""Font Awesome 6 Sharp"--fa-styleSet Font Awesome icon style Any valid Font Awesome style weight --fa-displaySet display of an icon Any valid CSS display value(opens new window) --fa-inverseSet color of an inverted icon Any valid CSS color value(opens new window)
Sizing Icons
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 Fresh icons, features, and software updates Plus support from real humans
Already have a Pro Plan?
Sign in
Class Details fa-1xChanges an icon's font-size to 1em fa-2xChanges an icon's font-size to 2em fa-3xChanges an icon's font-size to 3em fa-4xChanges an icon's font-size to 4em fa-5xChanges an icon's font-size to 5em fa-6xChanges an icon's font-size to 6em fa-7xChanges an icon's font-size to 7em fa-8xChanges an icon's font-size to 8em fa-9xChanges an icon's font-size to 9em fa-10xChanges an icon's font-size to 10em fa-2xsChanges an icon's font-size to 0.625em (~10px) and also vertically aligns icon fa-xsChanges an icon's font-size to .75em (~12px) and also vertically aligns icon fa-smChanges an icon's font-size to 0.875em (~14px) and also vertically aligns icon fa-lgChanges an icon's font-size to 1.25em (~120px) and also vertically aligns icon fa-xlChanges an icon's font-size to 1.5em (~24px) and also vertically aligns icon fa-2xlChanges an icon's font-size to 2em (~32px) and also vertically aligns icon
Fixed-Width Icons
Class Details fa-fwChanges an icon's font-size to .75em
Icons in a List
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 Fresh icons, features, and software updates Plus support from real humans
Already have a Pro Plan?
Sign in
Class Details fa-ulUsed on a <ul> or <ol> elements to style icons as list bullets fa-liUsed on individual <li> elements to style icons as list bullets
Rotating Icons
Class Details fa-rotate-90Rotates an icon 90° fa-rotate-180Rotates an icon 180° fa-rotate-270Rotates an icon 270° fa-flip-horizontalMirrors an icon horizontally fa-flip-verticalMirrors an icon vertically fa-flip-bothMirrors an icon both vertically and horizontally fa-rotate-byRotates an icon by a specific degree - setting an accompanying valid(opens new window) inline value for --fa-rotate-angle is required
CSS Custom Property Details Accepted Values --fa-rotate-angleSet rotation angle of.fa-rotate-by Any valid CSS transform rotate value(opens new window)
Animating Icons
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 Fresh icons, features, and software updates Plus support from real humans
Already have a Pro Plan?
Sign in
Class Details fa-spinMakes an icon spin 360° clock-wise fa-spin-pulseMakes an icon spin 360° clock-wise in 8 incremental steps fa-spin-reverseWhen used in conjunction with fa-spin or fa-spin-pulse, makes an icon spin counter-clockwise fa-beatMakes an icon scale up and down fa-fadeMakes an icon visually fade in and out using opacity fa-flipMakes an icon rotate about the Y axis
CSS Custom Property Details Accepted Values --fa-animation-delaySet an initial delay for animation Any valid CSS animation-delay value(opens new window) --fa-animation-directionSet direction for animation Any valid CSS animation-direction value(opens new window) --fa-animation-durationSet duration for animation Any valid CSS animation-duration value(opens new window) --fa-animation-iteration-countSet number of iterations for animation Any valid CSS animation-iteration-count value(opens new window) --fa-animation-timingSet how the animation progresses through frames Any valid CSS animation-timing-function value(opens new window) --fa-beat-scaleSet the max value an fa-beat icon will scale Any valid CSS number value(opens new window) --fa-fade-opacitySet lowest opacity value an fa-fade icon will fade to 0 1.0--fa-beat-fade-opacitySet lowest opacity value an fa-beat-fade icon will fade to and from 0 1.0--fa-beat-fade-scaleSet max value that an icon will scale Set the max value an fa-beat-fade icon will scale --fa-flip-xSet an fa-flip icon's x-coordinate of the vector denoting the axis of rotation Any valid CSS number value(opens new window) between 0 and 1 --fa-flip-ySet an fa-flip icon'sy-coordinate of the vector denoting the axis of rotation Any valid CSS number value(opens new window) between 0 and 1 --fa-flip-zSet an fa-flip icon's z-coordinate of the vector denoting the axis of rotation Any valid CSS number value(opens new window) between 0 and 1 --fa-flip-angleSet an fa-flip icon's rotation angle. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one. Any valid CSS angle value(opens new window)
Bordered Icons
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 Fresh icons, features, and software updates Plus support from real humans
Already have a Pro Plan?
Sign in
Class Details fa-borderCreates a border with border-radius and padding applied around an icons
Pulled Icons
CSS Custom Property Details Accepted Values --fa-pull-marginSet margin around icon Any valid CSS margin value(opens new window)
Stacking Icons
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 Fresh icons, features, and software updates Plus support from real humans
Already have a Pro Plan?
Sign in
Class Details fa-stackUsed on a parent HTML element of the two icons to be stacked fa-stack-1xUsed on the icon which should be displayed at base size when stacked fa-stack-2xUsed on the icon which should be displayed larger when stacked fa-inverseInverts the color of the icon displayed at base size when stacked
Duotone Icons
Class Details fa-swap-opacitySwap the default opacity of each layer in a duotone icon
CSS Custom Property Details Accepted Values --fa-primary-colorSet primary layer color Any valid CSS color value(opens new window) --fa-primary-opacitySet primary layer opacity 0 1.0--fa-secondary-colorSet secondary layer color Any valid CSS color value(opens new window) --fa-secondary-opacitySet secondary layer opacity 0 1.0
Accessibility
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 Fresh icons, features, and software updates Plus support from real humans
Already have a Pro Plan?
Sign in
Class Details fa-sr-onlyVisually hides an element containing a text-equivalent for an icon while keeping it accessible to assistive technologies fa-sr-only-focusableUsed 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
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… 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 Fresh icons, features, and software updates Plus support from real humans
Already have a Pro Plan?
Sign in
CSS Custom Property Details --fa-font-solidSets the font property to use the solid style (font-family and font-weight) in pseudo-element custom CSS rules --fa-font-regularSets the font property to use the regular style (font-family and font-weight) in pseudo-element custom CSS rules --fa-font-lightSets the font property to use the solid style (font-family and font-weight) in pseudo-element custom CSS rules --fa-font-thinSets the font property to use the thin style (font-family and font-weight) in pseudo-element custom CSS rules --fa-font-duotoneSets the font property to use the duotone style (font-family and font-weight) in pseudo-element custom CSS rules --fa-font-brandsSets the font property to use the brands style (font-family and font-weight) in pseudo-element custom CSS rules --fa-font-sharp-solidSets 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-regularSets 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-lightSets the font property to use the sharp familiy and light style (font-family and font-weight) in pseudo-element custom CSS rules --fa-font-sharp-thinSets the font property to use the sharp familiy and thin style (font-family and font-weight) in pseudo-element custom CSS rules