Though the classic bulleted list is perfectly utilitarian in many circumstances, sometimes we need to present bullets that are a little more graphically variant than the list styles disc, circle, and square. In this tutorial, I’ll walk you through styling bulleted lists using an icon font and CSS to create custom bullets.
Step 1: Install an icon font
We’re going to use Font Awesome as our icon font for this tutorial because it is freely available and has an awesome number of icons available (pun intended). Follow the instructions on their handy getting started page to install the Font Awesome icon font on your site.
You can use whatever font icon set you want to accomplish a similar effect, so Google away if you’d like to find some alternatives. I am also a huge fan of making custom icon fonts using Icomoon.
Step 2: Make a List
To ensure that the styling for our fancy list does not interfere with the styling of any other lists that appear on the page, I’m going to give our list a class of “fancy-list.”
The Code
<ul class="fancy-list">
<li>list item one </li>
<li>list item two </li>
<li>list item three </li>
</ul>
Output
- list item one
- list item two
- list item three
Step 3: Remove the Standard Bullets
Now we need to remove the default bullet styling. We’ll do this by setting the list-style to “none” in our CSS. Additionally, I am adding some basic text formatting to govern the font and font size of the list text.
The Code
ul.fancy-list {
font-family: arial, sans-serif;
font-size: 16px;
line-height: 20px;
list-style: none;
}
Output
- list item one
- list item two
- list item three
Step 4: Add the Icon Bullets
We are going to use the CSS pseudo-class :before and the content selector to place a star icon () before each list item.
To do this, we need to call the unicode key for the icon you want to use through the content selector. You’ll need to place a backslash (not a forward slash) before the unicode key in order for the character to render properly in the browser. In our example, the unicode key for the star character in the Font Awesome family is f005. You can find the unicode information for each Font Awesome icon on this cheat sheet or on the page for each individual icon.
In order for our icon to actually appear, we also need to define the icon font to be the font family for the pseudo class content. In this case, the font name is FontAwesome. I am also defining a color to make our stars orange.
The Code
ul.fancy-list li:before {
font-family: FontAwesome;
content: "f005";
color: #F5B54B;
}
Output
- list item one
- list item two
- list item three
Step 5: Adjust Icon Size
Things are starting to look pretty good, except for the fact that our star is out of proportion to the text in our list. We’ll adjust the size of the icon by using font-size, just like we would to style the size of any other font.
The Code
ul.fancy-list li:before {
font-family: FontAwesome;
font-size: 9px;
content: "f005";
color: #F5B54B;
}
Output
- list item one
- list item two
- list item three
Step 6: Adjust Spacing
We’re almost there! Now we just need to adjust the spacing so that there is some space between the star and the text and so that the star is vertically centered to align with each line of text.
Adding margin-right: 5px; adds the space we need between the star and the text.
Addressing the vertical centering of the star is a bit more tricky. You might think that adding padding-bottom or margin-bottom would work, but this actually adjusts the vertical placement of each list item AND the star. In order to control the placement of the star independently, we need to set position: relative;. Then, we can set the bottom property to whatever value places our stars in the right place.
The Code
ul.fancy-list li:before {
font-family: FontAwesome;
font-size: 9px;
content: "f005";
color: #F5B54B;
position: relative;
margin-right: 5px;
bottom: 2px;
}
Output
- list item one
- list item two
- list item three
Conclusion
Pulling in font icons through CSS is one way I’ve discovered to create consistent and graphically variant styling of bulleted lists. This technique is flexible across pretty much any icon font, including those you create yourself. Best of all, this technique is supported in modern browsers (though you may come across some issues with IE8).