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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Anonymous

    There’s a potential problem in IE8: http://adactio.com/journal/6555/ (didn’t test it, but Jeremy Keith is a solid source).

    • Anonymous

      Thanks. That sounds strange, but most of the font packaging services allow you to select which characters are replaced.

  • NetHAwk

    Although I knew all the elements of this idea, it never came to my mind to combine them in the way you did. The potential problem that CAugustin_de mentions in his valuable comment, can be addressed. Great!

  • Njanga

    Great. will be helpful some day.

  • EDS

    Just as easy to create an icon proof sheet and sprite them into the bullet.

    • Aniko Erlinger

      Not exactly. If you use images on a sprite, they do not scale with the font size. Hence icon fonts.

  • Malachi

    The link behind “For further details and code explanations” on the demo page doesn’t work.. just FYI. However, thanks for the post..

    • Anonymous

      Thanks Malachi – it’s been fixed.