Estilizar una lista usando iconos

Estilizar una lista usando iconos

Print Friendly, PDF & Email
Valora esta entrada

Siempre he tenido ciertos reparos al cargar imágenes para dar estilos a una listas porqué debes encontrar la imagen adecuada.

Debe ser una manía personal pero esta instrucción

ul {
list-style-image: url('');
}

no me entusiasma.

Pero hay un pequeño truco muy útil que nos puedo ayudar a hacerlo mediante los iconos de fontawesome (glyphicons, o caulquier otro que uses).

Para ello necesitas tener claros los conceptos de

En la siguiente imagen una muestra del resultado final perseguido.

como decorar listas con iconos

El icono que te muestro es el «\f0eb» (bombilla) pero podría ser cualquiera del repositorio de fontawesome.com

El pseudoselector ::before (::after)

::before es lo que se conoce como un pseudoselector.

Un pseudoselector es un tipo de selector que apunta a una parte del contenido de la etiqueta. Por ejemplo ::first-letter, ::after, …

Combinado con la instrucción content:""; podemos insertar contenido justo antes del propio contenido de la etiqueta.

Por ejemplo un icono.

Pero no sólo se puede combinar con content. Sirve también cualquier otra propiedad css. Margin, padding, border, color,….

Sólo tenemos que tener en cuenta que este contenido será de tipo inline y que para añadir width y height debemos pasarlo a inline-block o block.

Como estilizar una lista con css

Dado el siguiente html

<!DOCTYPE html>
<html>
<head>
	<title>test fontawesome</title>
	<meta charset="utf-8/">

	<link rel="stylesheet" href="fontawesome/css/all.css">
	<link rel="stylesheet" href="css/style.css">

</head>
<body>

<ul>
	<li>elemento 1</li>
	<li>elemento 2</li>
	<li>elemento 3</li>
	<li>elemento 4</li>
	<li>elemento 5</li>
</ul>


</body>
</html>

Ejemplo sin usar iconos

ul{list-style:none;}

li::before{
	content:"$";
	margin-right:8px;
}

Ejemplo usando iconos fontawesome

Descargados los archivos de fontawesome en su totalidad tu web debería tener un formato parecido a este.

Una vez hecho ahora si tu web va a leer all.css

Si revisas all.css los font-family declarados son:

font-family: 'Font Awesome 5 Free';
font-family: 'Font Awesome 5 Brands';

Estas son en consecuencia las fuentes que debes usar.

ul{list-style:none;}

li::before{
	font-family:"Font Awesome 5 Free";
	content:"\f0eb";
	margin-right:8px;
}

Importante: si seleccionas un icono que no exista en la tipografía elegida entonces no funcionará y se verá un recuadro vacío.

Con la instrucción list-style:none; reseteamos los estilos por defecto de la lista.

El punto esencial es tener en cuenta que te asegures que en la cabecera de tu documento web tengas

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

o

<link rel="stylesheet" href="[nombreCarpetaFontAwesome]/css/all.css">

correctamente funcionando.

Pásate por esta entrada para revisar si alguna cosa no está bien.

Ahora sólo necesitas seleccionar un icono que esté dentro de la tipografía que has usado.

Yo he usado «\f0eb»

El resultado final conseguido será el de la imagen de inicio.

¡Hola!

Querido lector,

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.