Imágen en lista

Te permite poner la imagen que quieras como viñetas en las etiquetas li de las listas


<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

<style>

.list li {
  list-style-type: none;
}

.list li:before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-radius: 50%;
  background-image: url(imgvignettes);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}        

</style>

Otra forma de hacerlo

codi.link


<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

<style>

li::marker{
content: "🔐";
/*
se recomienda usar iconos svg, tamaño maximo de 14px para que se ajuste bien
content: url(./icons/imgvignettes);
*/
}

</style>