Why is my HTML unordered list "list-style-image" not working?

Question

I cannot figure out why my unordered list "list-style-image" is not working. Here is what I have:

html,
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

#the-list li {
  margin: 2em 0;
}

#the-list li:first-child {
  color: red;
  font-weight: bold;
  list-style-type: none;
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#00800066" viewBox="0 0 16 16"><path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/><path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/></svg>');
}

#the-list li:last-child {
  color: blue;
  font-weight: bold;
  list-style-type: none;
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#B2222266" viewBox="0 0 16 16"><path d="m10.79 12.912-1.614-1.615a3.5 3.5 0 0 1-4.474-4.474l-2.06-2.06C.938 6.278 0 8 0 8s3 5.5 8 5.5a7.029 7.029 0 0 0 2.79-.588zM5.21 3.088A7.028 7.028 0 0 1 8 2.5c5 0 8 5.5 8 5.5s-.939 1.721-2.641 3.238l-2.062-2.062a3.5 3.5 0 0 0-4.474-4.474L5.21 3.089z"/><path d="M5.525 7.646a2.5 2.5 0 0 0 2.829 2.829l-2.83-2.829zm4.95.708-2.829-2.83a2.5 2.5 0 0 1 2.829 2.829zm3.171 6-12-12 .708-.708 12 12-.708.708z"/></svg>');
}

<div id="container">
  <div id="content">
    <ul id="the-list">
      <li>FIRST ... <span>word</span></li>
      <li>LAST ... <span>word</span></li>
    </ul>
  </div>
</div>

@j08691 The list image "bullet" should be the SVG image of an eye. normal eye for the first bullet and crossed out eye for the last bullet. — Brian, Feb 03 '22 at 19:52

score 2 · Accepted Answer · answered Feb 03 '22 at 19:55

You have to replace # with %23 in your SVGs:

  html,
  body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

#the-list li {
  margin: 2em 0;
}

#the-list li:first-child {
  color: red;
  font-weight: bold;
  list-style-type: none;
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%2300800066" viewBox="0 0 16 16"><path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/><path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/></svg>');
}

#the-list li:last-child {
  color: blue;
  font-weight: bold;
  list-style-type: none;
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23B2222266" viewBox="0 0 16 16"><path d="m10.79 12.912-1.614-1.615a3.5 3.5 0 0 1-4.474-4.474l-2.06-2.06C.938 6.278 0 8 0 8s3 5.5 8 5.5a7.029 7.029 0 0 0 2.79-.588zM5.21 3.088A7.028 7.028 0 0 1 8 2.5c5 0 8 5.5 8 5.5s-.939 1.721-2.641 3.238l-2.062-2.062a3.5 3.5 0 0 0-4.474-4.474L5.21 3.089z"/><path d="M5.525 7.646a2.5 2.5 0 0 0 2.829 2.829l-2.83-2.829zm4.95.708-2.829-2.83a2.5 2.5 0 0 1 2.829 2.829zm3.171 6-12-12 .708-.708 12 12-.708.708z"/></svg>');
}

<div id="container">
  <div id="content">
    <ul id="the-list">
      <li>FIRST ... <span>word</span></li>
      <li>LAST ... <span>word</span></li>
    </ul>
  </div>
</div>

score 0 · Answer 2 · answered Feb 03 '22 at 20:20

It works once Base64 encoded

html,
 body {
   margin: 0;
   padding: 0;
   font-family: sans-serif;
 }

 #the-list li {
   margin: 2em 0;
 }

 #the-list li:first-child {
   color: red;
   font-weight: bold;
   list-style-type: none;
   list-style-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNicgaGVpZ2h0PScxNicgZmlsbD0nIzAwODAwMDY2JyB2aWV3Qm94PScwIDAgMTYgMTYnPjxwYXRoIGQ9J00xMC41IDhhMi41IDIuNSAwIDEgMS01IDAgMi41IDIuNSAwIDAgMSA1IDB6Jy8+PHBhdGggZD0nTTAgOHMzLTUuNSA4LTUuNVMxNiA4IDE2IDhzLTMgNS41LTggNS41UzAgOCAwIDh6bTggMy41YTMuNSAzLjUgMCAxIDAgMC03IDMuNSAzLjUgMCAwIDAgMCA3eicvPjwvc3ZnPg==");
 }
 #the-list li:last-child { 
     color: blue;
     font-weight: bold;
     list-style-type: none;
     list-style-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNicgaGVpZ2h0PScxNicgZmlsbD0nI0IyMjIyMjY2JyB2aWV3Qm94PScwIDAgMTYgMTYnPiAgPHBhdGggZD0nbTEwLjc5IDEyLjkxMi0xLjYxNC0xLjYxNWEzLjUgMy41IDAgMCAxLTQuNDc0LTQuNDc0bC0yLjA2LTIuMDZDLjkzOCA2LjI3OCAwIDggMCA4czMgNS41IDggNS41YTcuMDI5IDcuMDI5IDAgMCAwIDIuNzktLjU4OHpNNS4yMSAzLjA4OEE3LjAyOCA3LjAyOCAwIDAgMSA4IDIuNWM1IDAgOCA1LjUgOCA1LjVzLS45MzkgMS43MjEtMi42NDEgMy4yMzhsLTIuMDYyLTIuMDYyYTMuNSAzLjUgMCAwIDAtNC40NzQtNC40NzRMNS4yMSAzLjA4OXonLz4gIDxwYXRoIGQ9J001LjUyNSA3LjY0NmEyLjUgMi41IDAgMCAwIDIuODI5IDIuODI5bC0yLjgzLTIuODI5em00Ljk1LjcwOC0yLjgyOS0yLjgzYTIuNSAyLjUgMCAwIDEgMi44MjkgMi44Mjl6bTMuMTcxIDYtMTItMTIgLjcwOC0uNzA4IDEyIDEyLS43MDguNzA4eicvPjwvc3ZnPg=="); 
}

Why is my HTML unordered list "list-style-image" not working?

2 Answers2