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:
• Set the Border Color
• position:fixed
• Set the Word Spacing
• Set the Font Properties
• Set the Font Variant
• Descendant Selector
• Set the border-collapse
• Set a Background Image
• Set the Border Style
• Set an Element's Margin

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