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 Cursor Style
• Set the Border Width
• Pseudo-class Selectors
• Set the Border Properties
• position:relative
• Vertical Align an Element
• Set the Text Case
• Set an Element's Overflow
• Set the Line Spacing
• Set the Type of Bullet Used in List

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