Why" list-style-image" attribute does not work-CodePudding

This is my css code:
ul{
list-style-type: square;
text-align:center;
list-style-position:inside;
color:blue;
line-height: 2rem;
list-style-image:url(icon.png);
}

and html code:
<body>
<article>
    <header>
        <h1>CSS Lists</h1>
    </header>
        <h1>Ordered List</h1>
    <ol start="5" reversed>
        <li>Step One</li>
        <li>Step Two</li>
        <li>Step Three</li>
    </ol>
       <h1>Unordered List</h1>
    <ul>
        <li>Step One</li>
        <li>Step Two</li>
        <li>Step Three</li>
    </ul>
</article>
</body>

My icon image, html and css file are all saved in the same folder.

However, when i save my code, the icon does not appear on my web page. Can anyone look into this?

enter image description here`

CodePudding user response：

Update your css like this

ul{
  list-style-type: none; /* remove the default bullet markers */
  text-align:center;
  list-style-position:inside;
  color:blue;
  line-height: 2rem;
  list-style-image:url('icon.png');
}

CodePudding user response：

It could be for different reasons.

first you forgot the ("") but most likely the culprit is the link for the image try a relative path

so type

list-style-image = url("./icon.png")

the "." before the "/" will indicate that you are going from this directory.