Icons in a List

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.

Before You Get Started

Make sure you're:

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

  • List icons can
  • be used to
  • replace bullets
  • in 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.

  1. List icons can
  2. be used to
  3. replace bullets
  4. in ordered lists also
 
<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 ordered lists also
  </li>
</ol>

Icons in a List + Logical Properties

The styling behind Icons in a List is built using CSS Logical Properties to support using icons in as many writing-modes 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 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 the width of icon Any valid CSS width value
  • List icons can
  • be used to
  • replace bullets
  • in lists
 
<ul class="fa-ul" style="--fa-li-width: 3em;">
  <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: 4em;">
  <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>
    No results