Skip to content
Font Awesome Docs: Version 5

Icons in a List

Building off of the vertical alignment in our 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.

  • List icons can
  • be used to
  • replace bullets
  • in lists
  <ul class="fa-ul">
    <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
    <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
    <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
    <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
  </ul>

  1. List icons can
  2. be used to
  3. replace bullets
  4. in lists
  <ol class="fa-ul">
    <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
    <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
    <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
    <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
  </ol>