24 Mar Estilizar una lista usando 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
- Pseudoselectores ::before y ::after
- Como insertar iconos en un documento web
- Estilizado básico de listas.
En la siguiente imagen una muestra del resultado final perseguido.
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!
Daniel
Posted at 03:47h, 01 octubreHola, 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!
Francesc Ricart
Posted at 10:08h, 21 marzo¡me alegro!
buen nofollow 😉