# Style Cheatsheet

Quick reference for styling Font Awesome icons in web projects.

> 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-family`       | Set Font Awesome icon family  | Any valid Font Awesome [family](/web/add-icons/how-to.md#families--styles)'s `font-family`     |
| `--fa-style`        | Set Font Awesome icon style   | Any valid Font Awesome [style](/web/add-icons/how-to.md#families--styles)'s `font-weight`      |
| `--fa-display`      | Set display of an icon        | Any valid CSS `display` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/display)   |
| `--fa-inverse`      | Set color of an inverted icon | Any valid CSS `color` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) |

## Sizing Icons

[<i class="fa-regular fa-book-open fa-lg fa-pull-right" style="position: relative; top: -2rem;" title="View Docs"></i>](/web/style/size.md)
| 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 |
| <br> | <br> |
| `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 (~20px) 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 |

## Icon Canvas + Widths

[<i class="fa-regular fa-book-open fa-lg fa-pull-right" style="position: relative; top: -2rem;" title="View Docs"></i>](/web/style/icon-canvas.md)
| 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](https://developer.mozilla.org/en-US/docs/Web/CSS/width) |

## Icons in a List

[<i class="fa-regular fa-book-open fa-lg fa-pull-right" style="position: relative; top: -2rem;" title="View Docs"></i>](/web/style/lists.md)
| 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](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) |
| `--fa-li-width`     | Set inline-size of icon | Any valid CSS `width` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/width)   |

## Rotating Icons

[<i class="fa-regular fa-book-open fa-lg fa-pull-right" style="position: relative; top: -2rem;" title="View Docs"></i>](/web/style/rotate.md)

| Class                | Details                                                                                                                                                                         |
| :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `fa-rotate-90`       | Rotates an icon 90&deg;                                                                                                                                                         |
| `fa-rotate-180`      | Rotates an icon 180&deg;                                                                                                                                                        |
| `fa-rotate-270`      | Rotates an icon 270&deg;                                                                                                                                                        |
| `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](https://developer.mozilla.org/en-US/docs/Web/CSS/angle) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/angle) |

## Animating Icons

[<i class="fa-regular fa-book-open fa-lg fa-pull-right" style="position: relative; top: -2rem;" title="View Docs"></i>](/web/style/animate.md)
| Class | Details |
| :---------------- | :----------------------------------------------------------------------------------------------- |
| `fa-spin` | Makes an icon spin 360&deg; clock-wise |
| `fa-spin-pulse` | Makes an icon spin 360&deg; 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-beat-fade` | Makes an icon scale up and down while fading in and out |
| `fa-bounce` | Makes an icon bounce up and down |
| `fa-shake` | Makes an icon shake back and forth |
| `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](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay)                     |
| `--fa-animation-direction`       | Set direction for animation                                                                                                      | Any valid CSS `animation-direction` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)             |
| `--fa-animation-duration`        | Set duration for animation                                                                                                       | Any valid CSS `animation-duration` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration)               |
| `--fa-animation-iteration-count` | Set number of iterations for animation                                                                                           | Any valid CSS `animation-iteration-count` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count) |
| `--fa-animation-timing`          | Set how the animation progresses through frames                                                                                  | Any valid CSS `animation-timing-function` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function) |
| `--fa-beat-scale`                | Set the max value an `fa-beat` icon will scale                                                                                   | Any valid CSS number [value](https://developer.mozilla.org/en-US/docs/Web/CSS/number)                                         |
| `--fa-fade-opacity`              | Set lowest opacity value an `fa-fade` icon will fade to                                                                          | `0` <i class="fa-regular fa-arrows-h fa-fw"></i> `1.0`                                                                        |
| `--fa-beat-fade-opacity`         | Set lowest opacity value an `fa-beat-fade` icon will fade to and from                                                            | `0` <i class="fa-regular fa-arrows-h fa-fw"></i> `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](https://developer.mozilla.org/en-US/docs/Web/CSS/number) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/number) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/number) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/angle)                                           |

## Bordered Icons

[<i class="fa-regular fa-book-open fa-lg fa-pull-right" style="position: relative; top: -2rem;" title="View Docs"></i>](/web/style/pull.md)
| 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](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color)   |
| `--fa-border-padding` | Set padding around icon | Any valid CSS `padding` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/padding)             |
| `--fa-border-radius`  | Set border radius       | Any valid CSS `border-radius` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) |
| `--fa-border-style`   | Set border style        | Any valid CSS `border-style` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style)   |
| `--fa-border-width`   | Set border width        | Any valid CSS ` border-width` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width)  |

## Pulled Icons

[<i class="fa-regular fa-book-open fa-lg fa-pull-right" style="position: relative; top: -2rem;" title="View Docs"></i>](/web/style/pull.md)
| Class | Details |
| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `fa-pull-start` | Pulls an icon by assigning a [float](https://developer.mozilla.org/en-US/docs/Web/CSS/float) value of `inline-start` and applying a `margin-inline-end` |
| `fa-pull-end` | Pulls an icon by assigning a [float](https://developer.mozilla.org/en-US/docs/Web/CSS/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](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) |

## Stacking Icons

[<i class="fa-regular fa-book-open fa-lg fa-pull-right" style="position: relative; top: -2rem;" title="View Docs"></i>](/web/style/stack.md)
| 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](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index)   |
| `--fa-inverse`       | Set color of an inverted stacked icon | Any valid CSS `color` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) |

## Duotone Icons

[<i class="fa-regular fa-book-open fa-lg fa-pull-right" style="position: relative; top: -2rem;" title="View Docs"></i>](/web/style/duotone.md)
| Class | Details |
| :---------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `fa-swap-opacity` | Swap the default opacity of each layer in a duotone icon<br /> (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](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) |
| `--fa-primary-opacity`   | Set primary layer opacity   | `0` <i class="fa-regular fa-arrows-h fa-fw"></i> `1.0`                                      |
| `--fa-secondary-color`   | Set secondary layer color   | Any valid CSS `color` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) |
| `--fa-secondary-opacity` | Set secondary layer opacity | `0` <i class="fa-regular fa-arrows-h fa-fw"></i> `1.0`                                      |

## Power Transforms

[<i class="fa-regular fa-book-open fa-lg fa-pull-right" style="position: relative; top: -2rem;" title="View Docs"></i>](/web/style/power-transform.md)

**Power Transforms are available only when using the [SVG+JS](/web/setup/host-yourself/svg-js.md) 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

[<i class="fa-regular fa-book-open fa-lg fa-pull-right" style="position: relative; top: -2rem;" title="View Docs"></i>](/web/add-icons/pseudo-elements.md)
| 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 |