Icons in the List

Using the power of fixed-width styling, we added some utility styling to handle HTML lists with icons used as decorative bullets.

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

  <ul class="fa-ul">
    <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>List icons can</li>
    <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></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>
  • List icons can
  • be used to
  • replace bullets
  • in lists

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"><i class="fa-solid fa-check-square"></i></span>List icons can</li>
    <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></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>
  </ol>
  1. List icons can
  2. be used to
  3. replace bullets
  4. in lists

# 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 to make customizing easier and more efficient. Define your own values for the following properties to override and customize Font Awesome's defaults.

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
  <ul class="fa-ul" style="--fa-li-width: 2em;">
    <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>List icons can</li>
    <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></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>
  • List icons can
  • be used to
  • replace bullets
  • in lists
  <ul class="fa-ul" style="--fa-li-margin: 1em;">
    <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>List icons can</li>
    <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></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>
  • List icons can
  • be used to
  • replace bullets
  • in lists

Something on your mind? We're all ears!

New icons just what you wanted? New thin style all that? Docs missing something key? Drop us a line and tell us all the good, bad and the ugly so we can make it even more awesome.

Manufacturers Protocol dictates this alpha cannot be captured. It must self-destruct.