Viñetas Personalizadas con Background

code

Código Completo

/* Contenedor de la lista */
ul {
  padding-left: 2rem;
  list-style-type: none;
}

/* Elementos de lista */
ul li {
  padding-left: 2rem;
  background-image: url(star.svg);
  background-position: 0 0;
  background-size: 1.6rem 1.6rem;
  background-repeat: no-repeat;
}
check_circle

Máximo control sobre posición, tamaño y espaciado

image

background-image

Especifica la ruta del archivo de imagen para usar como viñeta

url(star.svg)

location_on

background-position

Define dónde aparece la imagen en cada elemento de lista

0 0 = esquina superior izquierda

aspect_ratio

background-size

Establece el tamaño de la imagen de fondo

1.6rem = 16px (coincide con padding)

replay

background-repeat

Controla si la imagen se repite en el fondo

no-repeat = solo una copia

tips_and_updates

Padding asegura espacio suficiente para la viñeta