# Customizing Icons

How to create and apply custom styles to Font Awesome icons.

> Font Awesome icons can be customized even further using your own CSS. We've even added CSS Custom Properties to our style toolkit options.

Make sure you're:

- [Set up with Font Awesome](/web.md#web-setup) in your project.
- Familiar with the basics of [adding Font Awesome icons](/web/add-icons/how-to.md).

## Customize with CSS Custom Properties

Our styling toolkit provides a lot of utility, including size, rotate, stack, and animate icons. Using the [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) below, we've added easy ways to customize aspects of our styling toolkit's features.

| 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)                                   |
| <br /><br />                                                |                                                                                                                                                                                                                              |                                                                                                                               |
| **[Icons in a List](/web/style/lists.md)**                     |                                                                                                                                                                                                                              |                                                                                                                               |
| `--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 width of icon                                                                                                                                                                                                            | Any valid CSS `width` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/width)                                         |
| <br /><br />                                                |                                                                                                                                                                                                                              |                                                                                                                               |
| **[Icon Canvas](/web/style/icon-canvas.md)**                   |                                                                                                                                                                                                                              |                                                                                                                               |
| `--fa-width`                                                | Set an icon's width                                                                                                                                                                                                          | Any valid CSS `width` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/width)                                         |
| <br /><br />                                                |                                                                                                                                                                                                                              |                                                                                                                               |
| **[Rotating Icons](/web/style/rotate.md)**                     |                                                                                                                                                                                                                              |                                                                                                                               |
| `--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/transform-function/rotate()>)      |
| <br /><br />                                                |                                                                                                                                                                                                                              |                                                                                                                               |
| **[Animating Icons](/web/style/animate.md)**                   |                                                                                                                                                                                                                              |                                                                                                                               |
| `--fa-animation-delay`                                      | Set an initial delay for animation                                                                                                                                                                                           | Any valid CSS `animation-direction` [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)                                           |
| <br /><br />                                                |                                                                                                                                                                                                                              |                                                                                                                               |
| **[Bounce Icons](/web/style/pull.md)**                         |                                                                                                                                                                                                                              |                                                                                                                               |
| `--fa-bounce-rebound`                                       | Set the amount of rebound an icon has when landing after the jump                                                                                                                                                            | Any valid CSS `length` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/length)                                       |
| `--fa-bounce-height`                                        | Set the max height an icon will jump to when bouncing                                                                                                                                                                        | Any valid CSS `length` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/length)                                       |
| `--fa-bounce-start-scale-x`                                 | Set the icon's horizontal distortion ("squish") when starting to bounce                                                                                                                                                      | Any valid CSS number [value](https://developer.mozilla.org/en-US/docs/Web/CSS/number)                                         |
| `--fa-bounce-start-scale-y`                                 | Set the icon's vertical distortion ("squish") when starting to bounce                                                                                                                                                        | Any valid CSS number [value](https://developer.mozilla.org/en-US/docs/Web/CSS/number)                                         |
| `--fa-bounce-jump-scale-x`                                  | Set the icon's horizontal distortion ("squish") at the top of the jump                                                                                                                                                       | Any valid CSS number [value](https://developer.mozilla.org/en-US/docs/Web/CSS/number)                                         |
| `--fa-bounce-jump-scale-y`                                  | Set the icon's vertical distortion ("squish") at the top of the jump                                                                                                                                                         | Any valid CSS number [value](https://developer.mozilla.org/en-US/docs/Web/CSS/number)                                         |
| `--fa-bounce-land-scale-x`                                  | Set the icon's horizontal distortion ("squish") when landing after the jump                                                                                                                                                  | Any valid CSS number [value](https://developer.mozilla.org/en-US/docs/Web/CSS/number)                                         |
| `--fa-bounce-land-scale-y`                                  | Set the icon's vertical distortion ("squish") when landing after the jump                                                                                                                                                    | Any valid CSS number [value](https://developer.mozilla.org/en-US/docs/Web/CSS/number)                                         |
| <br /><br />                                                |                                                                                                                                                                                                                              |                                                                                                                               |
| **[Bordered Icons](/web/style/pull.md)**                       |                                                                                                                                                                                                                              |                                                                                                                               |
| `--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)                           |
| <br /><br />                                                |                                                                                                                                                                                                                              |                                                                                                                               |
| **[Pulled Icons](/web/style/pull.md)**                         |                                                                                                                                                                                                                              |                                                                                                                               |
| `--fa-pull-margin`                                          | Set margin around icon                                                                                                                                                                                                       | Any valid CSS `margin` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/margin)                                       |
| <br /><br />                                                |                                                                                                                                                                                                                              |                                                                                                                               |
| **[Stacking Icons](/web/style/stack.md)**                      |                                                                                                                                                                                                                              |                                                                                                                               |
| `--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)                                   |
| <br /><br />                                                |                                                                                                                                                                                                                              |                                                                                                                               |
| **[Duotone Icons](/web/style/duotone.md)**                     |                                                                                                                                                                                                                              |                                                                                                                               |
| `--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`                                                                        |
| <br /><br />                                                |                                                                                                                                                                                                                              |                                                                                                                               |
| **[Layering Text and Counters](/web/style/layer.md)**          |                                                                                                                                                                                                                              |                                                                                                                               |
| `--fa-counter-background-color`                             | Set `fa-layers-counter`'s background color                                                                                                                                                                                   | Any valid CSS `color` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)                                   |
| `--fa-counter-border-radius`                                | Set `fa-layers-counter`'s border radius                                                                                                                                                                                      | Any valid CSS `border-radius` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius)                         |
| `--fa-counter-line-height`                                  | Set `fa-layers-counter`'s line-height                                                                                                                                                                                        | Any valid CSS `line-height` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)                             |
| `--fa-counter-max-width`                                    | Set `fa-layers-counter`'s max-width                                                                                                                                                                                          | Any valid CSS `width` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/width)                                         |
| `--fa-counter-min-width`                                    | Set `fa-layers-counter`'s min-width                                                                                                                                                                                          | Any valid CSS `width` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/width)                                         |
| `--fa-counter-padding`                                      | Set `fa-layers-counter`'s padding                                                                                                                                                                                            | Any valid CSS `padding` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/padding)                                     |
| `--fa-counter-scale`                                        | Set how much `fa-layers-counter` is scaled up/down                                                                                                                                                                           | Any valid CSS `transform` scale [value](<https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale()>)        |
| `--fa-top`                                                  | Set top offset of `.fa-layers-top-left` or `layers-top-right`                                                                                                                                                                | Any valid CSS `top` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/top)                                             |
| `--fa-right`                                                | Set right offset of `.fa-layers-top-right` or `layers-bottom-right`                                                                                                                                                          | Any valid CSS `right` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/right)                                         |
| `--fa-bottom`                                               | Set bottom offset of `.fa-layers-bottom-left` or `layers-bottom-right`                                                                                                                                                       | Any valid CSS `bottom` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom)                                       |
| `--fa-left`                                                 | Set left offset of `.fa-layers-top-left` or `layers-bottom-left`                                                                                                                                                             | Any valid CSS `left` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/left)                                           |
| `--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)                                   |
| <br /><br />                                                |                                                                                                                                                                                                                              |                                                                                                                               |
| **[Pseudo-elements](/web/add-icons/pseudo-elements.md)**       |                                                                                                                                                                                                                              |                                                                                                                               |
| `--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 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                                                                                         |                                                                                                                               |
| <br /><br />                                                |                                                                                                                                                                                                                              |                                                                                                                               |
| **[Fast Style Switching](/web/dig-deeper/style-switching.md)** |                                                                                                                                                                                                                              |                                                                                                                               |
| `--fa-family-classic`                                       | Sets the `font-family` to `"Font Awesome 7 Pro"` in [Pro](https://fontawesome.com/plans) projects)<br />Sets the `font-family` `"Font Awesome 7 Free"` in [Free](https://fontawesome.com/search?ic=free&f=classic) projects. |                                                                                                                               |
| `--fa-family-sharp`                                         | Sets the `font-family` to `"Font Awesome 7 Sharp"` in [Pro](https://fontawesome.com/plans) projects)                                                                                                                         |                                                                                                                               |
| `--fa-family-duotone`                                       | Sets the `font-family` to `"Font Awesome 7 Duotone"` in [Pro](https://fontawesome.com/plans) projects)                                                                                                                       |                                                                                                                               |
| `--fa-family-sharp-duotone`                                 | Sets the `font-family` to `"Font Awesome 7 Sharp Duotone"` in [Pro](https://fontawesome.com/plans) projects)                                                                                                                 |                                                                                                                               |
| `--fa-family-etch`                                          | Sets the `font-family` to `"Font Awesome 7 Etch"` in [Pro+](https://fontawesome.com/plans?plans=plus) projects)                                                                                                              |                                                                                                                               |
| `--fa-family-jelly`                                         | Sets the `font-family` to `"Font Awesome 7 Jelly"` in [Pro+](https://fontawesome.com/plans?plans=plus) projects)                                                                                                             |                                                                                                                               |
| `--fa-family-jelly-duo`                                     | Sets the `font-family` to `"Font Awesome 7 Jelly Duo"` in [Pro+](https://fontawesome.com/plans?plans=plus) projects)                                                                                                         |                                                                                                                               |
| `--fa-family-jelly-fill`                                    | Sets the `font-family` to `"Font Awesome 7 Jelly Fill"` in [Pro+](https://fontawesome.com/plans?plans=plus) projects)                                                                                                        |                                                                                                                               |
| `--fa-family-notdog`                                        | Sets the `font-family` to `"Font Awesome 7 Notdog"` in [Pro+](https://fontawesome.com/plans?plans=plus) projects)                                                                                                            |                                                                                                                               |
| `--fa-family-notdog-duo`                                    | Sets the `font-family` to `"Font Awesome 7 Notdog Duo"` in [Pro+](https://fontawesome.com/plans?plans=plus) projects)                                                                                                        |                                                                                                                               |
| `--fa-family-slab`                                          | Sets the `font-family` to `"Font Awesome 7 Slab"` in [Pro+](https://fontawesome.com/plans?plans=plus) projects)                                                                                                              |                                                                                                                               |
| `--fa-family-slab-press`                                    | Sets the `font-family` to `"Font Awesome 7 Slab Press"` in [Pro+](https://fontawesome.com/plans?plans=plus) projects)                                                                                                        |                                                                                                                               |
| `--fa-family-thumbprint`                                    | Sets the `font-family` to `"Font Awesome 7 Thumbprint"` in [Pro+](https://fontawesome.com/plans?plans=plus) projects)                                                                                                        |                                                                                                                               |
| `--fa-family-whiteboard`                                    | Sets the `font-family` to `"Font Awesome 7 Whiteboard"` in [Pro+](https://fontawesome.com/plans?plans=plus) projects)                                                                                                        |                                                                                                                               |
| `--fa-family-brands`                                        | Sets the `font-family` to `"Font Awesome 7 Brands"` which is [not recommended](/web/dig-deeper/style-switching.md#change-icon-family) for use in Fast Style Switching!                                                          |                                                                                                                               |

### Using Custom Properties in a Project

[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) are still a pretty new thing for most folks. Here are some ways you can define them within your project&hellip;

#### Setting Properties with CSS \:root

You can define custom properties at [CSS :root pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) level. This will make any icons that use a styling toolkit's feature inherit the properties by default.

```html
<!-- by default, everything will be in v7's Classic regular style and in the holiday spirit -->
<style>
  :root {
    --fa-family: var(--fa-family-classic);
    --fa-style: 400;
    --fa-border-color: red;
    --fa-primary-color: green;
    --fa-secondary-color: red;
  }
</style>
```

#### Setting Properties with Project-Based CSS Rules

You can also set custom properties inside of your project's CSS, in the `<head>` of a page or in a separate stylesheet. These properties will be scoped to just elements that match the selector of the rule you've included them in.

```html
<style>
  /* setting a decorative icon dropcap before a block of text */
  .ye-olde-icon-dropcap {
    --fa-border-color: WhiteSmoke;
    --fa-border-padding: 2em;
    --fa-border-radius: 0.25em;
    --fa-pull-margin: 2em;

    font-size: 8em;
  }

  /* playing DJ with fa-record-vinyl */
  .track-quick-spin {
    --fa-spin-duration: 0.25s;
    --fa-spin-iteration-count: 1;
    --fa-spin-timing: ease-out;
  }

  .track-vocals {
    --fa-spin-duration: 10s;
    --fa-spin-timing: ease-in-out;
    --fa-spin-iteration-count: 2;
  }

  .track-dope-hook {
    --fa-spin-duration: 10s;
    --fa-spin-iteration-count: 10;
  }

  /* Mo' Malfoy! Mo' Malfoy! Mo' Malfoy! */
  .theme-slytherin {
    --fa-primary-color: darkgreen;
    --fa-secondary-color: silver;
  }

  /* extra sharp flavor */
  .theme-sharp {
    font: var(--fa-font-sharp-solid);
  }
</style>
```

#### Setting Properties with Inline Styles

Many of the examples in these docs define CSS custom properties using inline styling by adding a `style` attribute to an element. This is best for one-offs or very custom colored/styled duotone icons that you won't need to change at a system level.

```html
<!-- rotating an icon -->
<i class="fa-solid fa-bomb fa-rotate-by" style="--fa-rotate-angle: 45deg;"></i>

<!-- using inline styles to define duotone icon custom properties -->
<i class="fa-duotone fa-solid fa-crow" style="--fa-primary-color: dodgerblue; --fa-secondary-color: gold;"></i>
```

  <h4>
    Be careful of specificity and cascade!
  </h4>

CSS Custom properties that are redefined will trump each other. Defining a
property in `:root {}` and then defining the same property in a rule or inline
will result in the `:root` style being overridden.

---

## Add Your Own Custom Styling with CSS

Everything you can typically control with CSS is up for grabs — from color to display to alignment. We recommend targeting icons in your CSS in a couple of different ways. You can also add your own custom styling to Font Awesome icons by adding your own CSS rules in your project's code.

| Styling Case                   | Recommended Selector                                                                                                                                                                                                                                                                                                                                                                            |
| :----------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Custom styling all icons       | Add a consistent custom class to all icons (e.g. `.icon`, `.[projectprefix]-icon`, or `.fa-icon`)<br /><br />You can also use [style-classes](/web/add-icons/how-to.md#basics) for the in-use icon styles<br />`.fa-solid { ... }`<br />`.fa-regular { ... }`<br />`.fa-light { ... }`<br />`.fa-thin { ... }`<br />`.fa-duotone { ... }`<br />`.fa-brands { ... }`<br />`.fa-sharp-solid { ... }` |
| Custom styling a specific icon | Use the individual icon name, prefixed with `.fa-`<br />`.fa-user { ... }`<br />`.fa-font-awesome { ... }`                                                                                                                                                                                                                                                                                      |

Here's a quick example of using those selectors to add custom color to Font Awesome icons:

```html
<!-- reference your copy of Font Awesome in the head -->
<head>
  <link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet" />
  <link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet" />
  <link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet" />
  <link href="/your-path-to-fontawesome/css/sharp-solid.css" rel="stylesheet" />
</head>
```

<br />

  <div style="display: flex; vertical-align: top;justify-content: space-between;">
    <i style="background-color: papayawhip;border-radius: 0.2em; padding: 0.3em;color: salmon;" class="fa-2x fa-solid fa-fish"></i>
    <i style="background-color: papayawhip;border-radius: 0.2em; padding: 0.3em;color: green;" class="fa-2x fa-solid fa-frog"></i>
    <i style="background-color: papayawhip;border-radius: 0.2em; padding: 0.3em;opacity: 0.2;" class="fa-2x fa-solid fa-user-ninja vanished"></i>
    <i style="background-color: papayawhip;border-radius: 0.2em; padding: 0.3em;color: rgb(59, 91, 152);" class="fa-2x fa-brands fa-facebook"></i>
    <i style="background-color: papayawhip;border-radius: 0.2em; padding: 0.3em;color: salmon;" class="fa-2x fa-sharp fa-solid fa-fish"></i>
  </div>

```html
<!-- Add some style -->
<style>
  /* custom styling for all icons */
  .fa-solid,
  .fa-brands,
  .fa-sharp-solid {
    background-color: papayawhip;
    border-radius: 0.2em;
    padding: 0.3em;
  }

  /* custom styling for specific icons */
  .fa-fish {
    color: salmon;
  }

  .fa-frog {
    color: green;
  }

  .fa-user-ninja.vanished {
    opacity: 0.2;
  }

  .fa-facebook {
    color: rgb(59, 91, 152);
  }
</style>

<!-- Add some Icons -->
<body>
  <i class="fa-solid fa-fish"></i>
  <i class="fa-solid fa-frog"></i>
  <i class="fa-solid fa-user-ninja vanished"></i>
  <i class="fa-brands fa-facebook"></i>
  <i class="fa-sharp fa-solid fa-fish"></i>
</body>
```

  <h4>
    Writing Custom CSS with our SVG + JS framework
  </h4>

When using our SVG framework, remember that Font Awesome-based `<i>` DOM elements are replaced with new `<svg>` elements
by default. Be sure that your CSS rules target the right elements.