Use Image for List Item Bullets

By Stephen Bucaro

The bullets that you can define for list items; disc, circle, or square, are pretty drab. Use the list-style-image property to specify use of a custom image as the bullets to use for list items.

<ul style="list-style-image:url('path/imagename')">   
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

• List item 1
• List item 2
• List item 3

More CSS Quick Reference:
• position:absolute
• Set the Font Properties
• Use Image for List Item Bullets
• Set an Element's Overlap (z-index)
• Define CSS Rollover Effects
• Set The Cursor Style
• Set an Element's Margin
• Set the border-collapse
• Grouped Selectors
• Vertical Align an Element

RSS Feed

 Follow @Stephen Bucaro

 General Web Design
 HTML Quick Reference
 CSS Quick Reference
 Java Script Quick Reference
 HTML Design
 Graphics Design
 Easy Cascading Style Sheets
 Easy Java Script Code
 Web Design Tools
 Coding Issues