# Icons in a List

Tips for using and styling Font Awesome icons within HTML lists.

> We added some utility styling to handle HTML lists with icons used as decorative bullets.

We'll cover the basics of how to replace default bullets with icons in unordered lists and introduce options for customizing CSS properties.

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

Use `fa-ul` and `fa-li` to replace default bullets in unordered lists.

  <ul class="fa-ul">
    <li><span class="fa-li">Yes</span>List icons can</li>
    <li><span class="fa-li">Yes</span>be used to</li>
    <li><span class="fa-li"><i class="fa-solid fa-spinner fa-pulse"></i></span>replace bullets</li>
    <li><span class="fa-li"><i class="fa-regular fa-square"></i></span>in lists</li>
  </ul>

```html
<ul class="fa-ul">
  <li>
    <span class="fa-li">Yes</span>List icons can
  </li>
  <li>
    <span class="fa-li">Yes</span>be used to
  </li>
  <li>
    <span class="fa-li"><i class="fa-solid fa-spinner fa-pulse"></i></span>replace bullets
  </li>
  <li>
    <span class="fa-li"><i class="fa-regular fa-square"></i></span>in lists
  </li>
</ul>
```

You can also keep the semantics of an ordered list behind the scenes but use icon bullets visually.

  <ol class="fa-ul">
    <li><span class="fa-li">Yes</span>List icons can</li>
    <li><span class="fa-li">Yes</span>be used to</li>
    <li><span class="fa-li"><i class="fa-solid fa-spinner fa-pulse"></i></span>replace bullets</li>
    <li><span class="fa-li"><i class="fa-regular fa-square"></i></span>in ordered lists also</li>
  </ol>

```html
<ol class="fa-ul">
  <li>
    <span class="fa-li">Yes</span>List icons can
  </li>
  <li>
    <span class="fa-li">Yes</span>be used to
  </li>
  <li>
    <span class="fa-li"><i class="fa-solid fa-spinner fa-pulse"></i></span>replace bullets
  </li>
  <li>
    <span class="fa-li"><i class="fa-regular fa-square"></i></span>in ordered lists also
  </li>
</ol>
```

  <h4>
    Icons in a List + Logical Properties
  </h4>

The styling behind Icons in a List is built using
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values">CSS Logical Properties</a>
to support using icons in as many
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_writing_modes">writing-modes</a>
and languages as possible.

### List Classes

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

## Customization

We've added [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) to make customizing easier and more efficient. Define your own values for the following properties to [override and customize](/web/style/custom.md#using-custom-properties-in-a-project) Font Awesome's defaults.

| 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 the [width](https://developer.mozilla.org/en-US/docs/Web/CSS/width) of icon | Any valid CSS `width` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size) |

  <ul class="fa-ul" style="--fa-li-width: 3em;">
    <li><span class="fa-li">Yes</span>List icons can</li>
    <li><span class="fa-li">Yes</span>be used to</li>
    <li><span class="fa-li"><i class="fa-solid fa-spinner fa-pulse"></i></span>replace bullets</li>
    <li><span class="fa-li" style="--fa-li-width: 4em;"><i class="fa-regular fa-square"></i></span>in lists</li>
  </ul>

```html
<ul class="fa-ul" style="--fa-li-width: 3em;">
  <li>
    <span class="fa-li">Yes</span>List icons can
  </li>
  <li>
    <span class="fa-li">Yes</span>be used to
  </li>
  <li>
    <span class="fa-li"><i class="fa-solid fa-spinner fa-pulse"></i></span>replace bullets
  </li>
  <li>
    <span class="fa-li" style="--fa-li-width: 4em;"><i class="fa-regular fa-square"></i></span>in lists
  </li>
</ul>
```

<br />

  <ul class="fa-ul" style="--fa-li-margin: 4em;">
    <li><span class="fa-li">Yes</span>List icons can</li>
    <li><span class="fa-li">Yes</span>be used to</li>
    <li><span class="fa-li"><i class="fa-solid fa-spinner fa-pulse"></i></span>replace bullets</li>
    <li><span class="fa-li" style="--fa-li-margin: 2em;"><i class="fa-regular fa-square"></i></span>in lists</li>
  </ul>

```html
<ul class="fa-ul" style="--fa-li-margin: 4em;">
  <li>
    <span class="fa-li">Yes</span>List icons can
  </li>
  <li>
    <span class="fa-li">Yes</span>be used to
  </li>
  <li>
    <span class="fa-li"><i class="fa-solid fa-spinner fa-pulse"></i></span>replace bullets
  </li>
  <li>
    <span class="fa-li" style="--fa-li-margin: 2em;"><i class="fa-regular fa-square"></i></span>in lists
  </li>
</ul>
```