list-style-image: url('imageurl') does not display the image on webpage

Question

Hello im trying to use a customer image as a list marker through css, this is my code

<li class="unorderedList">

    Bread 

    <ul>
        <li> brown </li>
        <li> white </li>

    </ul>

</li>

<li> Milk </li>
<li> Butter </li>
<li> Onions </li>
<li> Coriander </li>

the image isnt loading onto the webpage as my list marker, this is the css i used.

div.unorderedList { border-style: solid; padding: 10px; }

li.unorderedList { list-style-image: url('..\images\marker.png');}

Answer 1

I would recommend not to use the list-style-image property. Instead i would use an image tag. Example:

.list-image {
  list-style: none;
  padding: 0;
}

.list-image li img{
  height: 15px;
  width: auto;
  margin-right: 5px;
}

<ul class="list-image">
  <li><img src="https://cdn.iconscout.com/icon/free/png-256/right-1478289-1251141.png" alt=""> brown </li>
  <li><img src="https://cdn.iconscout.com/icon/free/png-256/right-1478289-1251141.png" alt=""> white </li>
</ul>

But to answer your question directly. You did not target your list. li.unorderedList ul would be the solution.