CSS list-style-image not showing

Question

I'm trying to get an arrow as list style image. Googling and here on SO I found some things that can go wrong (display: list item, overflow, using background image, but didn't help. The path is correct.

ul#contactlist {list-style-image:url('images/images/arrow.png'); list-style-type: square; padding: 15px;}
    ul#contactlist li{display: list-item; padding: 10px; overflow: visible; width:100px; margin: 1px;

I also tried

ul#contactlist li{background-image:url('images/images/arrow.png'); background-repeat:no-repeat; background-position:0px 0px;

And

ul#contactlist li{background: url('images/images/arrow.png') left center no-repeat; list-style-position: inside; vertical-align: middle;}

What's weird is that the list-style-type: square; isn't showing either, but when I put display: list-item; on the ul#contactlist, there is 1 square.

list-style-position: inside; or outside, didn't help

This is the HTML.

<ul id="contactlist">
    <li>lorem</li>
    <li>ipsum</li>
    <li>dolor</li>
    <li>sit amet</li>
</ul>

Answer 1

Try below CSS

ul#contactlist {
    padding: 0;
    margin: 0;
}
ul#contactlist li{
    background:url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-forward-16.png') 2px 4px no-repeat; 
    display: list-item;
    padding: 3px 3px 3px 20px;
    list-style: none;
}

JSFIDDLE DEMO

Answer 2

This seems to work just fine...

I'm guessing some of your other bits of CSS are contradicting / overriding the list-style-image , or your image path is incorrect.

 #contactlist { list-style-image: url("http://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Sideways_Arrow_Icon.png/50px-Sideways_Arrow_Icon.png"); } 

 <ul id="contactlist"> <li>lorem</li> <li>ipsum</li> <li>dolor</li> <li>sit amet</li> </ul> 

Answer 3

You could try this.

 ul { list-style: none; } ul li { position: relative; } ul li:before { content: ">"; /* remove this is you want to use the image! */ position: absolute; width: 30px; height: 30px; left: -30px; background: url("images/images/arrow.png") no-repeat 50% 50% / contain; } 

 <ul> <li>LIST ITEM</li> <li>LIST ITEM</li> <li>LIST ITEM</li> <li>LIST ITEM</li> </ul