Using Font Awesome icon as Bullet points in HTML Un-Ordered Lists

Updated on August 26, 2015     Kisan Patel

This tutorial will show you how to use font awesome icon for bullet points in HTML Un-Ordered Lists.

HTML

<ul>
 <li>List Item 1</li>
 <li>List Item 2</li>
 <li>List Item 3</li>
</ul>

Here, we have remove the standard bullet points by setting list-style to none.

To add the icon, we use one from Font Awesome icon set in the content property of the li:before pseudo-element.
CSS

ul { padding-left:20px; list-style:none; }
li { margin-bottom:10px; }
li:before { 
 font-family: 'FontAwesome';
 content: '\f067';
 margin:0 5px 0 -15px;
}