Estilizar una lista usando iconos

0
(0)

Publicado

Aviso importante web en obras

Es posible que el contenido que estás visualizando tenga un formato un poco raro o que se haya perdido algún contenido. Esto se debe a que en 2023/09 decidí renovar la página y con más de 1000 escritos el trabajo de irlos revisando uno por uno es agotador. Poco a poco iré corrigiendo todos los contenidos. ¡Gracias por la comprensión!

como decorar listas con iconos

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.
Estilizar una lista usando iconos 1
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;
}
Estilizar una lista usando iconos 2

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
Estilizar una lista usando iconos 3
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.

Estilizar una lista usando iconos 4

¡Hola!

Querido lector,

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

  1. Avatar de Daniel

    Hola, me ha servido mucho tu contenido y lo he utilizado en mi web: http://www.condoscojines.com para poner a mis listados un toque personalizado. Te he valorado con 5 estrellas ¡Muchas gracias!

    1. Avatar de Francesc Ricart

      ¡me alegro!
      buen nofollow 😉

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *