Icons as List Bullets

Font Awesome Icons can be used to replace the default bullets of a list with fancy-looking Font Awesome Icons, which makes the list look not just fancy but interesting.

In order to achieve that we need to use two additional classes fa-ul and fa-li as mentioned below.

  • Class fa-ul on the list, either unordered or ordered list
  • Class fa-li on the list item
<ul class="fa-ul">
    <li><i class="fa-li fa fa-check"></i>Item 1</li>
    <li><i class="fa-li fa fa-close"></i>Item 2</li>
    <li><i class="fa-li fa fa-spinner fa-pulse"></i>Item 3</li>
    <li><i class="fa-li fa fa-square"></i>Item 4</li>
</ul>

Examples

We can check the outcome of the below HTML document to see how it looks.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>    
    <h1>List Icons</h1>
    <div class="col" style="font-size: 2rem;">
        <h2>Unordered list</h2>
        <ul class="fa-ul">
            <li><i class="fa-li fa fa-check"></i>Item 1</li>
            <li><i class="fa-li fa fa-close"></i>Item 2</li>
            <li><i class="fa-li fa fa-spinner fa-pulse"></i>Item 3</li>
            <li><i class="fa-li fa fa-square"></i>Item 4</li>
        </ul>
    </div>
    <div class="col" style="font-size: 2rem;">
        <h2>Ordered list</h2>
        <ol class="fa-ul">
            <li><i class="fa-li fa fa-check"></i>Item 1</li>
            <li><i class="fa-li fa fa-close"></i>Item 2</li>
            <li><i class="fa-li fa fa-spinner fa-pulse"></i>Item 3</li>
            <li><i class="fa-li fa fa-square"></i>Item 4</li>
        </ol>
    </div>
</body>
</html>

Overall

Replacing default list bullets with Font Awesome Icons is so simple.

Related Links