Cheesetoast » list http://www.cheesetoast.co.uk Brain Food for Web Developers Mon, 07 Jul 2014 23:18:22 +0000 en-US hourly 1 http://wordpress.org/?v=4.2.10 Custom Icons for Lists http://www.cheesetoast.co.uk/custom-icons-for-lists/ http://www.cheesetoast.co.uk/custom-icons-for-lists/#comments Mon, 12 Jul 2010 22:58:00 +0000 http://www.cheesetoast.co.uk/cheesepress/?p=33 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. Continue reading

The post Custom Icons for Lists appeared first on Cheesetoast.

]]>
Update: Since this article is quite old now you might want to look at a newer one about CSS Sprites with Pseudo Elements.

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.

Custom list iconsFirst 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 saved them as individual files.

Once you’ve found some suitable icons you can start 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>

Each of the list items within the unordered list has a unique ID. 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'); }

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

The post Custom Icons for Lists appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/custom-icons-for-lists/feed/ 0