list-style-image

li.test { list-style-image: none;}
li.test1 { list-style-image: url(/sample.png);}

The samples below use the following image (30px wide, 30px tall).

<ul style="list-style-image: none;">
	<li>This is a li element.</li>
	<li>This is a li element.</li>
	<li>This is a li element.</li>
	<li>This is a li element.</li>
	<li>This is a li element.</li>
</ul>

<ul style="list-style-image: url(/dics/dictionary-css/img/list-style-image_1.png);">
	<li>This is a li element.</li>
	<li>This is a li element.</li>
	<li>This is a li element.</li>
	<li>This is a li element.</li>
	<li>This is a li element.</li>
</ul>

Desktop

Chrome

1+ ○

Firefox

1+ ○

Safari

1+ ○

Edge

12+ ○

Supported in all versions

IE

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

7+ ○

6 and earlier ×

Mobile

iOS Safari

1+ ○

Android Browser

4.4+ ○

3 and earlier ×

Chrome Android

Latest ○

Same support as desktop

Firefox Android

Latest ○

Same support as desktop

※ Version data is based on MDN.

Displays the marker of li elements (and elements with 'display' set to 'list-item' or 'inline-list-item') using a specified image.

When using an image marker, the marker and text may not align properly, as shown below.

<ul style="list-style-image: url(/dics/dictionary-css/img/list-style-image_1.png);">
	<li>This is a li element.</li>
	<li>This is a li element.</li>
	<li>This is a li element.</li>
	<li>This is a li element.</li>
	<li>This is a li element.</li>
</ul>

If you want to align the marker image and text properly, consider using the 'background' property to display the image as a background, then adjust the position using the 'padding', 'height', and 'line-height' properties.

<p>The li elements below use 'list-style-type: none', 'background: url(/dics/dictionary-css/img/list-style-image_1.png) no-repeat', 'padding-left: 30px', 'height: 30px', 'line-height: 30px'.</p>
<ul>
	<li style="list-style-type: none; background: url(/dics/dictionary-css/img/list-style-image_1.png) no-repeat; padding-left: 30px; height: 30px; line-height: 30px;">This is a li element.</li>
	<li style="list-style-type: none; background: url(/dics/dictionary-css/img/list-style-image_1.png) no-repeat; padding-left: 30px; height: 30px; line-height: 30px;">This is a li element.</li>
	<li style="list-style-type: none; background: url(/dics/dictionary-css/img/list-style-image_1.png) no-repeat; padding-left: 30px; height: 30px; line-height: 30px;">This is a li element.</li>
	<li style="list-style-type: none; background: url(/dics/dictionary-css/img/list-style-image_1.png) no-repeat; padding-left: 30px; height: 30px; line-height: 30px;">This is a li element.</li>
	<li style="list-style-type: none; background: url(/dics/dictionary-css/img/list-style-image_1.png) no-repeat; padding-left: 30px; height: 30px; line-height: 30px;">This is a li element.</li>
</ul>