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