Reading time aprox: 5 minutes, 15 seconds
Usar fuentes de iconos en WordPress.
Es posible que en algún momento, durante la fase de diseño de tu sitio, te gustaría introducir unos iconos «molones» o, incluso, en un texto que estás escribiendo.
La mayoría de los temas modernos ya prevén esta contingencia y hacen uso de fuentes de iconos como la conocida «Fontawesome».
¿Qué son las fuentes de iconos?
En estos días es muy común encontrar textos con «caritas sonrientes» o de enfado o de …
Esa moda empezó hace unos años con los llamados «emoticonos» luego seguidos por los «emoji» que además pueden tener cierto movimiento, cierta animación.
El siguiente paso ha sido la adopción de fuentes con iconos, realmente no es una cosa nueva, ya hace años existían las fuentes conocidas como «Windings» o su familis «dingbat» que eran una variedad de símbolos renderizados (mayoritáriamente flechas y estrellas). Puedes aprender más sobre esa fuente en Wikipedia.
Estas fuentes con iconos son un paso interesante, ya que permiten la inserción de iconos en un texto, sin que tengamos que preocuparnos de crear e insertar gráficos que además, no funcionan igual que el texto a la hora de escalar (agrandar o disminuir el tamaño en pantalla).
¿Qué fuentes de iconos existen?
Existen varios paquetes de fuentes de iconos, diseñadas para diferentes usos y con diferentes símbolos, entre las que puedo citar:
- Entypo (http://www.entypo.com)
- Ligature (http://kudakurage.com/)
- Font Awesome (https:/fontawesome.com)
- Maki (https://labs.mapbox.com/maki-icons/)
- Peax Webdesign Free Icons (https://www.dafont.com/peaxwebdesignfreeicons.font)
Lejos de decir que una u otra es más recomendable, si puedo mencionar que «Font Awesome» es quizá la más popular y usada por distintos Temas (ya la traen incluida).
¿Qué ventajas tiene usar una fuente de iconos?
Veamos qué ventajas puede aportar el uso de fuentes de iconos:
Desventajas (que también las tienen)
¿Cómo se usa la fuente de iconos?
Por suerte, aunque hay distintos paquetes de fuentes de iconos, al ser todas fuentes, el uso es el mismo, aunque la referencia que debemos usar en cada caso, sea distinta.
Como regla general, hay dos pasos necesarios para el uso de este tipo de fuentes:
- Cargar la fuente.
- Incluir el icono en el texto.
El primer punto lo explicaré más ampliamente más adelante, porque existen varias formas de hacer esta carga.
El segundo paso es siempre igual, lo que hay que hacer, es incluir una llamada al caracter necesario.
Incluir el icono en el texto
Trabajando en html, lo que hay que hacer es insertar una etiqueta <span> con una llamada a la clase necesaria:
<p>Lorem ipsum dolo sit … <span class="icono-deseado"></span> eu fugiat nullapariatur.</p>
Claro que esto se aplica a cualquier web que esté en html (o sea, todas) pero los que trabajan con WordPress y el editor de bloques lo tienen más complicado.
¿Cómo usar fuentes de iconos en WordPress?
El camino fácil en WordPress, siempre viene de la mano de un plugin.
Los usuarios de WordPress y el editor de bloques, no están acostumbrados a cambiar el código html para introducir modificaciones y, para ellos, sale al rescate un plugin.
Un plugin diseñado específicamente para incluir iconos de «Font Awesome» en el texto. Se trata de «Block for Font Awesome».
El uso de este plugin altera de forma poco significativa, la forma en que se usan las fuentes de iconos.
Cuando este plugin está activado, parece un nuevo bloque en la lista de bloques disponibles, llamado «getbutterfly/font-awesome».
Si no quieres complicarte, simplemente usa el shortcode que el plugin ha generado; cuando estés escribiendo un párrafo, has de escribir, por ejemplo:
Lorem ipsum dolo sit ... [fa class="fas fa-fw fa-phone"] eu fugiat nullapariatur.
El código del icono, es el que Font Awesome ha indicado, por eso todas las clases y códigos hacen referencia a «fa»
El resultado de la línea de ejemplo es:
Lorem ipsum dolo sit … eu fugiat nullapariatur.
¿Cómo cargar la fuente?
Hay varias formas de cargar una fuente iconos, porque a fin de cuentas, es una fuente más.
Pues ¡no! Es decir, si pero … Se trata de una fuente, si, pero en realidad es un paquete de fuentes, en la mayoría de los casos.
Para no liar demasiado la explicación, voy a tomar como ejemplo la instalación del paquete de iconos «FontAwesome»
Si se tratase de un fuente normal, lo sencillo sería cambiar el archivo style.css de nuestro tema hijo, e incluir un enlace a la fuente.
Al tratarse de un paquete de fuentes, lo más fácil es insertar la llamada al javascript de instalación, en las primeras líneas de la cabecera html.
Ejemplo
<head>
<script src="https://kit.fontawesome.com/a291c39abc3.js" crossorigin="anonymous"></script>
...
</head>
Esto se puede hacer de varias maneras; algunos temas incluyen, como parte de su personalización, la posibilidad de incluir líneas de código para la cabecera.
Otra posibilidad es la de usar un plugin que nos permita insertar código en las cabeceras, como el «Insert Headers and Footers» (https://es.wordpress.org/plugins/insert-headers-and-footers/).
Aunque hay una forma más «profesional» de hacer esto, y que además cumple con las normas de WordPress.
Paso #1
Accede a la página oficial (https://fontawesome.com/download) y descárgate la fuente haciendo clic en el botón que indica Font Awesome Free for Web.
El archivo descargado debe tener un nombre parecido a: «fontawesome-free-5.3.1-web.zip» donde puede variar el número de la versión.
Paso #2
Descomprime el zip y cambia el nombre del directorio que se ha creado de «fontawesome-free-5.3.1-web» a «fontawesome».
Paso #3
Como no queremos cambiar los iconos sino simplemente mostrarlos, puedes eliminar los directorios: «less», «scss», «sprites», «svgs», «js» y «metadata», quedándote únicamente con «css», «webfonts» y el archivo de licencia.
Paso #4
Mueve todo el directorio «fontawesome» hasta el directorio de tu tema hijo de WordPress (wp-content/themes/nombreDeTuTema/)
Paso #5
Edita el archivo functions.php y busca si ya existe una función que se encargue de añadir estilos y scripts, para ello busca el texto wp_enqueue_scripts, que es el gancho de WordPress donde se incluyen estos archivos.
Es posible que encuentres una función muy parecida a la scv_scripts_styles que usamos a continuación, en caso de que tengas otras fuentes instaladas.
Paso #6
Antes de que finalice la función de callback añade el código que incluirá Font Awesome:
<?php
/**
* Enqueue scripts and styles for front end.
*
*/
function scv_scripts_styles() {
//Código existente dentro de la función
//Enqueue font awesome
wp_enqueue_style( 'font-awesome', get_stylesheet_directory_uri().'/fontawesome/css/all.min.css' );
}
add_action( 'wp_enqueue_scripts', 'scv_scripts_styles' );
?>
Este código llama a la función wp_enqueue_style a la que pasamos dos parámetros:
- El handle: que no es más que el nombre que asignamos a la hoja de estilos, en nuestro caso «font-awesome».
- La ruta donde se encuentra la hoja de estilos principal de «Font Awesome», llamada «all.min.css».
Paso #7
Comprueba que todo ha ido bien accediendo a la galería de iconos. Una vez allí asegúrate que filtras únicamente los gratuitos (en el menú lateral izquierdo) y haz clic en cualquier icono. Dentro del detalle del icono copia el código HTML, por ejemplo:
<span class="fas fa-fw fa-phone"></span>
Paso #8
Si usas el editor de bloques, tendrás que crear un bloque «Custom HTML» y poner ahí el código copiado.
Si usas el editor clásico, entra en modo código (pestaña HTML) y entra el código copiado.
Así verás que aparece tu símbolo seleccionado
Conclusión
No es tan complicado como puede parecer en un principio y puede ser muy divertido.
A pesar de que «Font Awesome» no son las únicas fuentes de iconos gratuitas del mercado han sido un referente durante mucho tiempo.
Mi recomendación, juega, experimenta y, sobre todo, ¡divertirte!
¡Gracias por leernos!
¡Tus comentarios y preguntas nos ayudan a mejorar, por favor comenta!