在HTML，CSS中不显示作为项目符号的图像

Question

我有一个包含不同语句的列表。 每个语句应有一个单独的图像作为项目符号。 没有图像显示为项目符号，而是正常的“光盘”图像。

 /* I tried different approaches like: */ #boxes .search li { list-style-image: url('./img/icons/search.svg') } 

 <section id="boxes"> <div class="advantages"> <ul id="search"> <li>My statement, which should display "search" as a bullet image</li> </ul> <ul id="time"> <li>My statement, which should display "time" as a bullet image</li> </ul> <ul id="open_folder"> <li>My statement, which should display "a folder" as a bullet image</li> </ul> <ul id="shake"> <li>My statement, which should display "a handshake" as a bullet image</li> </ul> </div> </section> 

Answer 1

尝试

#boxes li{
  background-image: url('./img/icons/search.svg')
}

从评论中编辑 ，听起来像是您想要的：

#search {
   background-image: url('./img/icons/search.svg')
}

Answer 2

您在CSS代码中缺少分号。 这是工作代码-

#boxes ul#search li{
  list-style-image: url('http://css-plus.com/examples/2011/12/custom-list-style/i/tick.png');
}

要么

#boxes #search li{
  list-style-image: url('http://css-plus.com/examples/2011/12/custom-list-style/i/tick.png');
}

https://www.codeply.com/go/g747DzzOqe