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:relative
• Set List Properties
• Set the Background Color
• Set the Font Slant
• Specifying Color
• Set the Background Properties
• Set the Text Color
• Pseudo-class Selectors
• Use Inline Style
• Highlight Text

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