How to Use Webfont Icons as Bullet Points in HTML5 Lists

HTML unordered lists are boring. You can define a disc, circle or square but it’s not easy to change their size or color. You can use list-style-image to define an image but it won’t necessarily match the font size, positioning is difficult and it’s buggy in old versions of IE.

Wouldn’t it be great if we could use any icon in any color instead of standard bullet points?

View the webfont icon bullet point demonstration page…

Wonderful Webfonts

I love webfont icons. They’re vector graphics defined as characters in font files which can be loaded and used in HTML, CSS and JavaScript. They can be scaled to any size, offer excellent browser compatibility (IE6+ support) and a single font usually loads faster than multiple images.

There are several online tools to help you pick appropriate icons then package them into cross-browser font files. I used Fontello, but IcoMoon and Flaticon do a similar job.

Webfont Icon Replacement

First, we need a standard HTML list. We’ll add a class of icon to the ul tag and, optionally, we can apply different classes to each li tag to set different icons:

<ul class="icon">
<li class="star">item 1</li>
<li class="info">item 2</li>
<li class="help">item 3</li>
</ul>

Next, we’ll set list-style-type to none to remove the standard bullet points. We’ll then set a negative text-indent on each li to move the first line of each list item back. I’ve used 1.4em but you can change that to make the space between the icon larger or smaller as necessary:

ul.icon
{
	list-style-type: none;
}

ul.icon li
{
	text-indent: -1.4em;
}

To add the icon, we use one from our icon set in the content property of the li:before pseudo-element. Note that it’s floated left and has a width which matches the text-indent set above — this will push the first line back to its original position:

ul.icon li:before
{
	font-family: bullets;
	content: "\e800";
	float: left;
	width: 1.4em;
}

Finally, we can set different webfont icons depending on the li class name, e.g.

ul.icon li.info:before { content: "\e800"; }
ul.icon li.star:before { content: "\e803"; }
ul.icon li.help:before { content: "\e801"; }
ul.icon li.bulb:before { content: "\e804"; }
ul.icon li.hand:before { content: "\e805"; }

View the webfont icon bullet point demonstration page…

It’s also possible to set differing color, font-size and spacing properties. The icons will appear where you want them and match the size of the list text.

Using webfont icons is a simple and elegant solution to a long-standing problem … designers never want standard bullet points. It works in all browsers from IE8 and degrades well in IE6 and IE7. I hope you find it useful.