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.

Frequently Asked Questions (FAQs) about Using Webfont Icons as Bullet Points in HTML5 Lists

How can I use webfont icons as bullet points in HTML5 lists?

To use webfont icons as bullet points in HTML5 lists, you first need to include the webfont CSS file in your HTML document. Then, you can use the CSS ‘list-style-type’ property to set the bullet point style to ‘none’, and use the ‘before’ pseudo-element to add the webfont icon before each list item. You can specify the webfont icon you want to use by setting the ‘content’ property to the appropriate Unicode value.

What are the benefits of using webfont icons as bullet points?

Using webfont icons as bullet points can enhance the visual appeal of your lists and make them more engaging for users. Webfont icons are scalable vector graphics, which means they can be resized without losing quality. They also offer a wider range of design options compared to traditional bullet points.

Can I use different webfont icons for different list items?

Yes, you can use different webfont icons for different list items. You can do this by assigning a unique class to each list item and then using the ‘before’ pseudo-element to add a different webfont icon before each class.

How can I change the color and size of webfont icons?

You can change the color and size of webfont icons using CSS. To change the color, use the ‘color’ property. To change the size, use the ‘font-size’ property. You can apply these properties to the ‘before’ pseudo-element that is used to add the webfont icon.

Are there any compatibility issues with using webfont icons as bullet points?

Webfont icons are generally well-supported across all modern browsers. However, older versions of Internet Explorer (IE8 and below) do not support the ‘before’ pseudo-element. If you need to support these older browsers, you can use a JavaScript polyfill.

Can I use webfont icons as bullet points in ordered lists?

Yes, you can use webfont icons as bullet points in ordered lists. The process is the same as for unordered lists. However, keep in mind that using webfont icons will override the default numbering of ordered lists.

Where can I find webfont icons to use as bullet points?

There are many online resources where you can find webfont icons. Some popular options include Font Awesome, Google Material Icons, and IcoMoon. These sites offer a wide range of icons that you can use for free.

Can I create my own webfont icons to use as bullet points?

Yes, you can create your own webfont icons using a vector graphics editor like Adobe Illustrator or Inkscape. Once you have created your icons, you can convert them into a webfont using a tool like IcoMoon.

How can I align webfont icons with list text?

You can align webfont icons with list text using CSS. You can use the ‘vertical-align’ property to align the icons vertically, and the ‘margin’ property to adjust the spacing between the icons and the text.

Can I use webfont icons as bullet points in nested lists?

Yes, you can use webfont icons as bullet points in nested lists. You can do this by assigning a unique class to each level of the list and then using the ‘before’ pseudo-element to add a different webfont icon before each class.