How to use Font Awesome Icons as Bullets

H

This could be accomplished by using the built in Font Awesome CSS classes

  1. Add the fa-ul class to the ul html tag
  2. Between the li tags add <i class=”fa-li fa fa-stop”></i> replacing the fa-stopCSS class with the icon class you would like to show as the bullet

Example:

<ul class="fa-ul">
 <li><i class="fa-li fa fa-stop"></i>Bullet 1</il>
 <li><i class="fa-li fa fa-stop"></i>Bullet 2</il>
 <li><i class="fa-li fa fa-stop"></i>Bullet 3</il>
 <li><i class="fa-li fa fa-stop"></i>Bullet 4</il>
 <li><i class="fa-li fa fa-stop"></i>Bullet 5</il>
</ul>

About the author

Ian Carnaghan

I am a software developer and online educator who likes to keep up with all the latest in technology. I also manage cloud infrastructure, continuous monitoring, DevOps processes, security, and continuous integration and deployment.

About Author

Ian Carnaghan

I am a software developer and online educator who likes to keep up with all the latest in technology. I also manage cloud infrastructure, continuous monitoring, DevOps processes, security, and continuous integration and deployment.

Follow Me