Here’s a really quick tip for jazzing up your bullet points in unordered lists. Make use of the ability to assign images as your list-style.

First of all you’ll need a set of icons to use. There are a lot of websites out there that offer free icon sets, such as iconfinder. Alternatively you could make your own. Make sure the icons are a suitable size (I’ve used 15px by 15px icons) and save them as individual files.

Once you’ve found some suitable icons you can being with the HTML:

<ul>
<li id=”home”><a href=’#'>Home</a></li>
<li id=”articles”><a href=’#'>Articles</a></li>
<li id=”search”><a href=’#'>Search</a></li>
<li id=”contact”><a href=’#'>Contact</a></li>
</ul>

As you can see each of the list items within the unordered list has a unique ID. We will use CSS to associate the icons with each ID:

ul #home { list-style-image: url(‘/home.png’); }
ul #articles { list-style-image: url(‘/articles.png’); }
ul #search { list-style-image: url(‘/search.png’); }
ul #contact { list-style-image: url(‘/contact.png’); }

There, simple as that! With a bit of extra styling, this method can be used to make some very attractive lists that stand out from the rest.