How to style list items with Font Awesome or Glyphicons

Today we will share cool CSS snippet for styling those boring html list elements with cool font awesome or glyphicon icons.

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<ul>
<li>Style HTML list elements with font awesome</li>
<li>How to style list elements with CSS</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>In rutrum, mauris nec lacinia consequa.</li>
</ul>

CSS

ul {
list-style: none;
padding: 0;
}
li {
padding-left: 20px;
}
li:before {
content: "\f00c"; /* FontAwesome Unicode symbol value */
font-family: FontAwesome;
display: inline-block;
margin-left: -20px;
width: 20px;
}

Note: Keep the margin-left & width same as the padding-left in li

If you want to use glyphicons for stlying list items then just change font-family: FontAwesome; with font-family: ‘Glyphicons Halflings’; in the above code. Also don’t forget to include glyphicon fonts.

Leave a Reply

Your email address will not be published. Required fields are marked *