Propiedad list-style-image

image

Función

Permite usar imágenes personalizadas como viñetas en lugar de viñetas simples

code

Sintaxis Básica

/* Usar imagen como viñeta */
ul {
  list-style-image: url(star.svg);
}

/* Usar imagen PNG */
ul {
  list-style-image: url(logo.png);
}
star

Reemplaza el marcador predeterminado

warning

Limitaciones

close

Poco control sobre el tamaño

No se puede ajustar fácilmente el tamaño de la imagen

close

Posicionamiento limitado

No se puede ajustar la posición con precisión

close

Sin control de espaciado

Difícil ajustar la distancia entre viñeta y texto

lightbulb

Recomendación

Usar propiedades background para mayor control sobre tamaño, posición y espaciado de las viñetas personalizadas

arrow_forward

Ver la siguiente diapositiva para la solución con propiedades background