Font Awesome V4 - Icons as List Bullets Example

Using Font Awesome Icons within a web page is super easy

  • Include the icon library CDN within the head section of a document
  • Then access the icons using their predefined classes from the library

Here is the example that explains how the Font Awesome Icons can be used as list bullets by simply using additional classes fa-ul and fa-li.

Run this on IDE

<!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>
    <h2>Unordered list</h2>
    <div class="col" style="font-size: 2rem;">
        <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>
    <h2>Ordered list</h2>
    <div class="col" style="font-size: 2rem;">
        <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

This example helps us understand how to use Font Awesome Icons as list bullets.

Related Links