Como colocar una imagen como viñeta de lista con CSS

Hola a todos, es esta ocasión les traigo un pequeño ejemplo de como podemos colocar imágenes como viñetas a las listas utilizando CSS, es muy sencillo. Para ello vamos a crear tres estilos diferentes: vinieta1, vinieta2 y vinieta3 cada una de ellas tendrá una imagen diferente, comencemos.

La propiedad que tenemos que definir a las listas para cambiar la viñeta normal por una imagen es list-style-image, si queremos crear varias listas con diferentes iconos podriamos definir una clase por cada lista y quedaria de la siguiente forma.

Reglas CSS


.vinieta1{
list-style-image: url('list1.gif');
 }
 .vinieta2{
list-style-image: url('list2.png');
 }
 .vinieta3{
list-style-image: url('list3.png');
 }

CODIGO HTML

Ahora solo tenemos que añadir la clase a las listas que se van a crear y listo ya tenemos una lista con una imagen como viñeta.


<ul class="vinieta1">
    <li> Elemento lista 1</li>
</ul>
<ul class="vinieta2">
<li> Elemento lista 2</li>
</ul>
<ul class="vinieta3">
    <li> Elemento lista 3</li>
</ul>

Eso es todo, espero que el ejemplo les ayude, recomienden el blog, saludos.

4 comentarios en “Como colocar una imagen como viñeta de lista con CSS”

  1. iker dice:

    de que tamaño tiene que ser la imagen en png? mas o menos la medida estandar del bullet normal??? gracias

    1. denker dice:

      Se recomienda que sea pequeña 16 o 20px

  2. fugitivonet dice:

    muy bueno! me ha servido, es muy sencillo y rápido. Gracias.

  3. Gracias, me ha sido de mucha utilidad, lo que me falta es hacer que la letra no quede muy abajo…

Deja un comentario