Iconos
Ya hemos visto que, en la cabecera de cada página web, se muestran unos iconos:
| Icono | Descripción |
|---|---|
| mostrar/ocultar la barra lateral | |
| selector de esquema de colores (el “tema”) | |
| abrir el cuadro de búsqueda | |
| imprimir el libro completo |
mdBook permite que insertemos estos y otros iconos como parte del texto:
Pulse en el icono para imprimir
¿Como lograrlo? Tenemos que insertar una etiqueta <i> seguida de una de cierre:
<i></i>
En principio, las etiquetas <i> son la forma de marcar texto en cursiva, pero
mdBook hace un uso particular y las utiliza de esta forma para insertar
iconos. Tenemos que asignarle una clase (o varias, depende del icono):
<i class="fas fa-print"></i>
Con lo que lo anterior, queda así:
Pulse en el icono <i class="fas fa-print"></i> para imprimir
¿Como averiguar la clase a la que pertenece cada icono? mdBook los saca de un repositorio llamado Font Awesome. Podemos examinar los iconos disponibles acudiendo a la página de búsquedas.
mdBook solo incluyen iconos de la versión 6, clase regular, solid,
y brands; los iconos de pago como la clase light no se contemplan.
Por ejemplo, acudimos a la página mencionada, introducimos un término de
búsqueda, por ejemplo, trash. Seleccionamos free y versión 6.
En los resultados, seleccionamos el icono
que representa una papelera.
En la descripción del icono se nos muestra el texto HTML a poner en nuestro texto:
<i class="fa-regular fa-trash-can"></i>para el icono<i class="fa-solid fa-trash-can"></i>para el icono