in Tutorials

How to: Add custom icons to list items using CSS and Base64

With the addition of a few icons, you can take your plain old boring list and give a fresh look. In this tutorial I will show you the perfect way of adding icons to your list items using only CSS and some Base64 encoded icons.

In this quick tutorial I will show you how you can take a boring old shopping list and spice it up with cute and useful icons. I will go over different techniques and discuss the pros and cons of the different approaches.

View finished result

Using the list-style-image property

In an ideal world of total homogeneous cross browser rendering, the list-style-image CSS property should solve the issue and this post would not have any merits. But whether you are a skilled front end ninja or just a novice designer starting out, you know the web is not ideal.

The list-style-image CSS property simply let’s you swap out the standard list bullet with an image of your choice:

See the Pen Shopping list styled with list-style-image by Jess (@iconfinder) on CodePen.0

As you can see, the list-style-image approach works almost perfectly, but has two essential problems. The first is cross-browser rendering. Depending on the browser, the image will be aligned slightly differently to the text in the list item.

The second and much bigger problem is that you can’t change the vertical position of the image. The image will always be aligned to the baseline of the text. In a lot of cases you would want to change that alignment, but can’t.

style-image-example

Using the background property

In order to position the bullet arbitrarily we need to actually not display the bullet at all. Instead we will add the image as a background on the list item and use background positioning to make sure we get the alignment we want.

See the Pen AdGCe by Jess (@iconfinder) on CodePen.0

Personally, I have never been a fan of this approach, as it is a bit of a hack. But for many years it has been the defacto standard way of doing arbitrary positioning of bullets, due to the insufficiencies in the CSS standard.

But as you can see from the image below, the bullets do align much prettier with this technique. As with so many other things in CSS I guess, we just have to settle for the hack and see if things gets better in the future.

In the meantime we have our selves a list custom bullets that aligns the way we want them to.

background-image-example

Spicing up the shopping list with custom icons

So now we’ve gotten the bullets aligned the way we want. But, I think the list would look much better if each item had a fitting icon. It would also improve the usability of our shopping list.

This is fairly easy to do. First thing we need is a set of icons. I like this new set of Veggies:

Veggies by antto

Veggies by Antto

Secondly, we need to add a unique identifier to the different types of items on the shopping list. You can do this in a couple of different ways. The verdict is still out on what is the correct approach, but the classic way is adding a class:

A newer way is by using the HTML5 data attribute to define what type of item we are dealing with:

In my example I have used the latter approach, since it separates data from styling-only classes. Here is the finished result:

See the Pen Shopping list styled with background image by Jess (@iconfinder) on CodePen.0

Optimising with Base64

As you will probably have noticed in the example code above, I have no links to image assets. Instead, I used a Base64 encoded version of the icons, which allows me to embed the image in the CSS. Learn more about Base64 encoding your assets.

Cartoon__Crisp__Cucumber__Salad__Vegetable_icon___Icon_Search_Engine___Iconfinder

When you use Iconfinder to find icons, you also have the option to grab the Base64 encoded version straight from the site. That way you never have to deal with an image file.

Leave a Reply for leaf blower Cancel Reply

Write a Comment

Comment

  1. I did not find a possibility to copy+paste the base64 code in Iconfinder; I get the usual image file (svg,png) – and have to make the base64 myself. Is ist a paid feature?

  2. Hi Jess,
    Thanks for sharing this useful information! I’ve tried it with success, but when I render the page in a mobile the position image property makes the images move from the position I want to show them. Should the images have a special size to show them in a responsive way? Is there a way to show them in a relative way to the content of the li element? Thanks a lot in advance.

  3. Hi, I think your website might be having browser compatibility issues.

    When I look at your blog in Safari, it looks fine but
    when opening in Internet Explorer, it has some overlapping.
    I just wanted to give you a quick heads up! Other then that, fantastic blog!

  4. When I originally left a comment I appear to have clicked on the -Notify me when new comments
    are added- checkbox and now each time a comment is added I receive four emails with the same comment.
    Perhaps there is an easy method you can remove
    me from that service? Thanks a lot!