Jump to content
Sign in to follow this  
grahamd79

Want unique icon on each li

Recommended Posts

grahamd79    3
grahamd79

Hi, Please tell me how can I put unique icons for each list item. Please visit www.trendorg.co.uk and see the 'Best of Us' section. I want each list to have a unique icon like the following image; oGB3A.jpg

Share this post


Link to post
Share on other sites
Danny    1,327
Danny
Hi Graham, Each menu item is given a unique ID (see image below). http://www.screencast.com/t/O77JNnrKKA You can use these ID's to add images to each menu item. For example, to add an icon/image to the Sample Page menu, you would use this: [code].menu-item-33 {} <---- Sample Page ID .menu-item-71 {} <---- Page 2 ID[/code] What I would recommend you is, you use this [url="http://www.trendorg.co.uk/wp-content/uploads/2012/04/list_back.png"]image[/url] to create a sprite, add each icon you want to use on the menus and then using the CSS above as a guideline, use the background-position to postion the icons into place. Below is an example: http://i.imgur.com/hWNj3.png This may help you - http://www.w3schools.com/cssref/css3_pr_background.asp

Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×