hi, Any one please guide me that how we can put Each & unique icon for all the Li under UL See the image : http://emoneypk.com/contact-emoneypk.png live: http://emoneypk.com/ on right side you can see a contact us widget, All the icons are in image at the moment, I want it to be on li css, can only past the sample code here?
You can do it with character glyphs from the unicode set. For example, here's code using a telephone glyph and an "E" for email and "S" for Skype. I leave it to you to find appropriate glyphs (if they exist). Another method entails your making appropriate icons of the base size you need for the line height you use. Apply them as background images. <!DOCTYPE HTML> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Test document</title> <style type="text/css"> /*<![CDATA[*/ ul { list-style: none; } li::before { font-size: 2em; margin-right: 1em; vertical-align: middle; } li#pho::before { content: "\260e"; } li#email::before { content: "E" } li#skype::before { content: "S"; } /*]]>*/ </style> </head> <body> <ul> <li id="pho">List item with custom list marker</li> <li id="email">another</li> <li id="skype">YACM</li> </ul> </body> </html> Code (markup): To use the icons, change the css like so: li { padding-left: 1.5em; } li#tel { background: transparent url(tel.gif) left middle no-repeat; } li#email { background: transparent url(email.gif) left middle no-repeat; } li#skype { background: transparent url(skype.gif) left middle no-repeat; } Code (markup): cheers, gary