Displaying bullet icon using CSS list-style-image property

CSS list-style-image property accepts the value as URL location of the image that is published along with your web site or any other location on the internet. Yes you can display the image from your local server as well as any other source for example photo sharing site like Yahoo Flickr or any other free source of images. The image specified as a value for the list-style-image property appears as a bullet for each list item of the associated unordered list element of HTML.

Syntax

list-style-image: [none] | [‘url path of image.ext’] | [inherit];

Examples

Example 1

list-style-image: url('image.gif');

Example 2

list-style-image: url(image.gif);

Single quotes are optional to pass the image URL path of the list style image.

You can set the value as "none" to remove the image.

Last value "inherit" specifies that property value should be inherited from the parent element, but this value is not supported by all the browsers.

The CSS list-style-type property must also be used along with list-style-image property that enables the browser to display the predefined type of bullet incase image is unavailable at any instance.

Continue to next tutorial: CSS list-style-position property to set the position of ordered or unordered list items in the content flow.