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.
| Class | Details |
|---|
fa-inverse | Inverts the color of an icon to white |
| CSS Custom Property | Details | Accepted Values |
|---|
--fa-family | Set Font Awesome icon family | Any valid Font Awesome family’s font-family |
--fa-style | Set Font Awesome icon style | Any valid Font Awesome style’s font-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 |
| 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-width-auto | Set the width of an icon only their symbol and not the entire Icon Canvas |
| CSS Custom Property | Details | Accepted Values |
|---|
--fa-width | Set the width of an icon | Any valid CSS width value |
| 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 inline-size of icon | Any valid CSS width value |
| 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 |
| 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 |
| 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 |
| Class | Details |
|---|
fa-pull-start | Pulls an icon by assigning a float value of inline-start and applying a margin-inline-end |
fa-pull-end | Pulls an icon by assigning a float value of inline-end and applying a margin-inline-start |
| CSS Custom Property | Details | Accepted Values |
|---|
--fa-pull-margin | Set margin around icon | Any valid CSS margin value |
| 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 |
| 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 |
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 |
| CSS Custom Property | Details |
|---|
--fa-font-solid | Sets the font property to use the classic family and solid style (font-family and font-weight) in pseudo-element custom CSS rules |
--fa-font-regular | Sets the font property to use the classic family and regular style (font-family and font-weight) in pseudo-element custom CSS rules |
--fa-font-light | Sets the font property to use the classic family and light style (font-family and font-weight) in pseudo-element custom CSS rules |
--fa-font-thin | Sets the font property to use the classic family and thin style (font-family and font-weight) in pseudo-element custom CSS rules |
--fa-font-duotone | Sets the font property to use the duotone family and 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 family and 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 family and 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 family and thin style (font-family and font-weight) in pseudo-element custom CSS rules |
--fa-font-brands | Sets the font property to use the brands family and regular 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 family and 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 family and 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 family and 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 family and thin style (font-family and font-weight) in pseudo-element custom CSS rules |
