CSS

How to use Font Awesome Icons as Bullets

Written by Ian Carnaghan · 31 sec read >

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>

Last Updated On March 22, 2018
Written by 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. Profile

Leave a Reply

avatar
  Subscribe  
Notify of