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 an Element's Display Property
• Use word-wrap Property to allow Line Breaks in the Middle of Words
• How to Use a CSS ID Selector
• Set the Font Style
• Set the Font Boldness
• Use Image for List Item Bullets
• Set List Properties
• Define CSS Rollover Effects
• Set the Text Case
• Use Inline Style

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