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

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
--fa-inverse	Set color of an inverted icon	Any valid CSS color value

Sizing Icons

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	Sets an icon to display at a fixed width for easy vertical alignment

Icons in a List

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
--fa-li-width	Set width of icon	Any valid CSS width value

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

Animating Icons

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
--fa-animation-direction	Set direction for animation	Any valid CSS animation-direction value
--fa-animation-duration	Set duration for animation	Any valid CSS animation-duration value
--fa-animation-iteration-count	Set number of iterations for animation	Any valid CSS animation-iteration-count value
--fa-animation-timing	Set how the animation progresses through frames	Any valid CSS animation-timing-function value
--fa-beat-scale	Set the max value an fa-beat icon will scale	Any valid CSS number value
--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 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 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 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

Bordered Icons

Class	Details
fa-border	Creates a border with border-radius and padding applied around an icon

CSS Custom Property	Details	Accepted Values
--fa-border-color	Set border color	Any valid CSS border-color value
--fa-border-padding	Set padding around icon	Any valid CSS padding value
--fa-border-radius	Set border radius	Any valid CSS border-radius value
--fa-border-style	Set border style	Any valid CSS border-style value
--fa-border-width	Set border width	Any valid CSS border-width value

Pulled Icons

Class	Details
fa-pull-left	Pulls an icon by floating it left and applying a margin-right
fa-pull-right	Pulls an icon by floating 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

Stacking Icons

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

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

Accessibility

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

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