Skip to content

Style Cheatsheet

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.

General

ClassDetails
fa-inverseInverts the color of an icon to white
CSS Custom PropertyDetailsAccepted 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 styleAny valid Font Awesome style weight
--fa-displaySet display of an iconAny valid CSS display value
--fa-inverseSet color of an inverted iconAny valid CSS color value

Sizing Icons

ClassDetails
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

ClassDetails
fa-fwChanges an icon’s font-size to .75em

Icons in a List

ClassDetails
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
CSS Custom PropertyDetailsAccepted Values
--fa-li-marginSet margin around iconAny valid CSS margin value
--fa-li-widthSet width of iconAny valid CSS width value

Rotating Icons

ClassDetails
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 inline value for --fa-rotate-angle is required
CSS Custom PropertyDetailsAccepted Values
--fa-rotate-angleSet rotation angle of.fa-rotate-byAny valid CSS transform rotate value

Animating Icons

ClassDetails
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 PropertyDetailsAccepted Values
--fa-animation-delaySet an initial delay for animationAny valid CSS animation-delay value
--fa-animation-directionSet direction for animationAny valid CSS animation-direction value
--fa-animation-durationSet duration for animationAny valid CSS animation-duration value
--fa-animation-iteration-countSet number of iterations for animationAny valid CSS animation-iteration-count value
--fa-animation-timingSet how the animation progresses through framesAny valid CSS animation-timing-function value
--fa-beat-scaleSet the max value an fa-beat icon will scaleAny valid CSS number value
--fa-fade-opacitySet lowest opacity value an fa-fade icon will fade to0 1.0
--fa-beat-fade-opacitySet lowest opacity value an fa-beat-fade icon will fade to and from0 1.0
--fa-beat-fade-scaleSet max value that an icon will scaleSet 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 rotationAny valid CSS number value between 0 and 1
--fa-flip-ySet an fa-flip icon’sy-coordinate of the vector denoting the axis of rotationAny valid CSS number value between 0 and 1
--fa-flip-zSet an fa-flip icon’s z-coordinate of the vector denoting the axis of rotationAny valid CSS number value 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

Bordered Icons

ClassDetails
fa-borderCreates a border with border-radius and padding applied around an icons
CSS Custom PropertyDetailsAccepted Values
--fa-border-colorSet border colorAny valid CSS border-color value
--fa-border-paddingSet padding around iconAny valid CSS padding value
--fa-border-radiusSet border radiusAny valid CSS border-radius value
--fa-border-styleSet border styleAny valid CSS border-style value
--fa-border-widthSet border widthAny valid CSS border-width value

Pulled Icons

ClassDetails
fa-pull-leftPulls an icon by floating it left and applying a margin-right
fa-pull-rightPulls an icon by floating it right and applying a margin-left
CSS Custom PropertyDetailsAccepted Values
--fa-pull-marginSet margin around iconAny valid CSS margin value

Stacking Icons

ClassDetails
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
CSS Custom PropertyDetailsAccepted Values
--fa-stack-z-indexSet z-index of a stacked iconAny valid CSS z-index value
--fa-inverseSet color of an inverted stacked iconAny valid CSS color value

Duotone Icons

ClassDetails
fa-swap-opacitySwap 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 PropertyDetailsAccepted Values
--fa-primary-colorSet primary layer colorAny valid CSS color value
--fa-primary-opacitySet primary layer opacity0 1.0
--fa-secondary-colorSet secondary layer colorAny valid CSS color value
--fa-secondary-opacitySet secondary layer opacity0 1.0

Accessibility

ClassDetails
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

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- AttributeDetails
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

CSS Custom PropertyDetails
--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