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

General

Class Details
fa-inverse Inverts the color of an icon to white
CSS Custom Property Details Accepted Values
--fa-style-family Set 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-style Set Font Awesome icon style Any valid Font Awesome style weight
--fa-display Set display of an icon Any valid CSS display value (opens new window)
--fa-inverse Set color of an inverted icon Any valid CSS color value (opens new window)

Sizing Icons

Advertisement

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

Fixed-Width Icons

Class Details
fa-fw Changes an icon's font-size to .75em

Icons in a List

Advertisement

Class Details
fa-ul Used on a <ul> or <ol> elements to style icons as list bullets
fa-li Used on individual <li> elements to style icons as list bullets
CSS Custom Property Details Accepted Values
--fa-li-margin Set margin around icon Any valid CSS margin value (opens new window)
--fa-li-width Set width of icon Any valid CSS width value (opens new window)

Rotating Icons

Class Details
fa-rotate-90 Rotates an icon 90°
fa-rotate-180 Rotates an icon 180°
fa-rotate-270 Rotates an icon 270°
fa-flip-horizontal Mirrors an icon horizontally
fa-flip-vertical Mirrors an icon vertically
fa-flip-both Mirrors an icon both vertically and horizontally
fa-rotate-by Rotates 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-angle Set rotation angle of.fa-rotate-by Any valid CSS transform rotate value (opens new window)

Animating Icons

Advertisement

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 (opens new window)
--fa-animation-direction Set direction for animation Any valid CSS animation-direction value (opens new window)
--fa-animation-duration Set duration for animation Any valid CSS animation-duration value (opens new window)
--fa-animation-iteration-count Set number of iterations for animation Any valid CSS animation-iteration-count value (opens new window)
--fa-animation-timing Set how the animation progresses through frames Any valid CSS animation-timing-function value (opens new window)
--fa-beat-scale Set the max value an fa-beat icon will scale Any valid CSS number value (opens new window)
--fa-fade-opacity Set lowest opacity value an fa-fade icon will fade to 0 1.0
--fa-beat-fade-opacity Set lowest opacity value an fa-beat-fade icon will fade to and from 0 1.0
--fa-beat-fade-scale Set max value that an icon will scale Set the max value an fa-beat-fade icon will scale
--fa-flip-x Set 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-y Set 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-z Set 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-angle Set 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

Advertisement

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 (opens new window)
--fa-border-padding Set padding around icon Any valid CSS padding value (opens new window)
--fa-border-radius Set border radius Any valid CSS border-radius value (opens new window)
--fa-border-style Set border style Any valid CSS border-style value (opens new window)
--fa-border-width Set border width Any valid CSS border-width value (opens new window)

Pulled Icons

Class Details
fa-pull-left Pulls an icon by floating (opens new window) it left and applying a margin-right
fa-pull-right Pulls an icon by floating (opens new window) it right and applying a margin-left
CSS Custom Property Details Accepted Values
--fa-pull-margin Set margin around icon Any valid CSS margin value (opens new window)

Stacking Icons

Advertisement

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 (opens new window)
--fa-inverse Set color of an inverted stacked icon Any valid CSS color value (opens new window)

Duotone Icons

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 (opens new window)
--fa-primary-opacity Set primary layer opacity 0 1.0
--fa-secondary-color Set secondary layer color Any valid CSS color value (opens new window)
--fa-secondary-opacity Set secondary layer opacity 0 1.0

Accessibility

Advertisement

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

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

Advertisement

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
--fa-font-sharp-thin Sets the font property to use the sharp familiy and thin style (font-family and font-weight) in pseudo-element custom CSS rules