Updated on 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;
}