¿Cómo poner una imagen como bullet point con CSS?

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í.

¿Cómo poner una imagen como bullet point con CSS?

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.

Cómo poner una lista con imágenes en HTML y CSS
<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.

Lista de datos con imagen como viñeta con CSS
<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.

Lista de texto con imágen como viñeta con CSS
<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>


También te interesaría...

Suscríbete a nuestra lista de correo

Agregue un comentario

Su dirección de correo no se hará público. Los campos requeridos están marcados *


Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.