En este tutorial de HTML/CSS te enseñaremos cómo colocar una imagen como bullet point (viñeta). Esto quiere decir que podrás personalizar tus listas con pequeñas imagenes pixel y más.
Siempre es bueno probar el código en tu editor de texto antes de subirlo a tu página web o blog. Así que te recomiendo utilizar el bloc de notas, Sublime Text o cualquier otro editor. Creamos un archivo .html, y probaremos el siguiente código. Podemos descargar imagenes pixeles para bullet points de aquí.
Paso 1: Crear la lista de HTML
Lo primero que tenemos que tener es nuestra lista creada, la cual se realiza con el siguiente código.
<ul> <li> Primer dato</li> <li> Segundo dato</li> <li> Tercer dato</li> </ul>
Paso 2: Agregar CSS para poner imagen como bullet point
En este paso, debemos colocar el código de CSS para aplicar a todas las listas una misma imagen. La imagen que seleccionemos debe estar en la misma carpeta que el archivo de texto. De no ser así, se deberá poner todo el URL completo hacia la imagen. En este caso, nuestra imagen se llama bulletrombo03.png.
<html>
<head>
<style type="text/css">
ul {
list-style-image: url('bulletrombo03.png');
}
</style>
</head>
<body>
<ul>
<li> Primer dato</li>
<li> Segundo dato</li>
<li> Tercer dato</li>
</ul>
</body>
</html>Paso 3: Agregar diferentes imagenes para cada lista
Ahora lo que puedes hacer es crear estilos de listas para aplicar diferentes imagenes a cada lista. Esto se realiza colocándole una clase a cada lista. En este ejemplo, llamamos a nuestras clases de lista: lista1 y lista2. Cada una, tiene su código de CSS ul.lista1 para aplicar la imagen respectiva.
<html>
<head>
<style type="text/css">
ul.lista1 {
list-style-image: url('bulletrombo05.png');
}
ul.lista2 {
list-style-image: url('bulletrombo04.png');
}
</style>
</head>
<body>
<ul class="lista1">
<li> Primer dato</li>
<li> Segundo dato</li>
<li> Tercer dato</li>
</ul>
<ul class="lista2">
<li> Primera idea</li>
<li> Segunda idea</li>
<li> Cuarta idea</li>
</ul>
</body>
</html> 
