List items are one of those things that look the same in a browser, Word document, email, or anywhere else. Fortunately, we have CSS to help us make these lists a bit more exciting on the web! While there are many ways to style list items, we’re going to look at a way of adding an icon from the FontAwesome icon library using only CSS and pseudo-elements.
Creating a List
Because we want to write our code semantically, you simply want to create an unordered list (ordered will work just as well) with your list items. Unless you want to apply the same style to all lists in your site, you just need to add a class to the unordered list so you can style it separate from all others.
Important note: make sure you’ve also included the FontAwesome CSS library somewhere in your code. You’ll need this to display an icon!
HTML
<ul class="icon-list" >
<li>Darth Maul</li>
<li>Luke Skywalker</li>
<li>General Grievous</li>
<li>Boba Fett</li>
<li>Leia Organa</li>
</ul>
A simple Star Wars listing of characters will do. Next up, let’s write some CSS.
Clearing the Defaults and Preparing the List
First things first, you need to clear out some of the default styles and get your list ready for your icons.
CSS
.icon-list, .icon-list li {
padding: 0;
margin: 0;
list-style: none;
}
.icon-list li {
margin: 1em;
margin-left: 3em;
}
In the CSS above, I clear out the default padding, margin, and list item bullets. Then add a bit of margin back to the list items, leaving a little extra space to the left of the list item for the icon you’re going to add.
To keep text from wrapping under the icon, you’ll be floating the icon left and then giving it a negative left margin to set it out next to the list item.
Adding the Icon via CSS
While the FontAwesome examples page suggests using icons for lists, the provided code shows the icons actually being added to the HTML. Besides being unsemantic bloat in the HTML, sometimes you don’t have access to the list itself, eg. a CMS-generated list of content. That’s why we want to add these icons via CSS.
The easiest way to accomplish this is to add a pseudo-element that is the FontAwesome character you want to use.
CSS
.icon-list li:before {
content: '\f006'; /* fa-star */
font-family: 'FontAwesome';
float: left;
margin-left: -1.5em;
color: #0074D9;
}
Start by adding a content attribute for the icon you want to use. The FontAwesome Cheat Sheet is a great place to find the appropriate codes. For the example above, I’ve used an empty star that the cheat sheet says has this code: . To get the code you need to use in the content attribute, remove the &, #, x, and ; (semicolon). Then place the remaining characters in the CSS with a forward slash (\) at the beginning. Example:  = \f006.
After you’ve decided on the icon, we need to make sure it looks like an icon. To do this, you just need to set the “font-family” attribute to “FontAwesome”. The declaration for this font has already been set in the library, so you don’t need to add any @font-face attributes or anything.
Next, float the icon left and add some negative left margin. This will keep the icon out to the left of the list item, even if the item spans multiple lines. Without these, the text content would wrap under the icon on subsequent lines.
The final result should look something like this:
Extending the Idea
While this is great for setting up a more interesting list item bullet, you can easily set up several list styles in the same site to show other icons like checkmarks for to-do lists, empty squares for printable checklists, or globes for a listing of locations. The possibilities are endless!
