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

Advertisement

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

Before You Get Started

Make sure you're:

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>

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>

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
Advertisement

Customization

We've added CSS custom properties (opens new window) 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 (opens new window)
--fa-li-width Set width of icon Any valid CSS width value (opens new window)
  <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>
  <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>

You're viewing the Version 6 Beta

It's all the awesome of 5, but now more six-y! Version 6 brings over 13,000 icons across 5 styles – including the new Thin style! – and includes more and faster services.

Get the Deets on Version 6

Head Back to Our Current Version 5 Release

Need a Hand?

If you’re stuck or have a question, check our Troubleshooting docs, all of the Font Awesome threads on Stack Overflow, or contact our community on GitHub.

Or get Real Human Support™ with a Pro Subscription!