Usar fuentes de iconos en WordPress

Tiempo de lectura aprox: 5 minutos, 15 segundos

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:

Evitar solicitudes al servidor
Si fueran imágenes sueltas, tendríamos que realizar una solicitud al servidor para descargar la imagen cada vez que se usa y esto puede ralentizar la aparición de la página.
Ampliar/reducir los iconos
Al ser las fuentes tipográficas vectoriales, se podrá reducir o ampliar su tamaño sin pérdida de calidad, por lo que podrás adaptar los diseños a cualquier tipo de pantalla.
Cambios de color
Nada de tener que repetir el icono en diferentes colores, simplemente las variaciones de color de estos los realizarás con el atributo color de CSS.
Sombras u otros estilos CSS
Con el atributo text-shadow agregaremos una sombra a nuestro icono, aunque también seremos capaces de añadir otros efectos como resplandor, trazo, tachado, grosor, etc.
Cambio radical de iconos
Puede que algún día quieras cambiar el aspecto de los iconos, lo que lograrás cambiando sólo el CSS.

Desventajas (que también las tienen)

Iconos monocromáticos
Al ser fuentes, el icono va a ser siempre del mismo color, por lo que si queremos varios colores en un mismo icono, tendremos que hacer uso del formato gráfico.
Iconos iguales en todos los sitios web
Existen menos fuentes de iconos que paquetes de imágenes, por lo que tus iconos pueden coincidir con otras páginas web.

¿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:

  1. Cargar la fuente.
  2. 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 PLugin Block for FontAwesome
El PLugin Block for FontAwesome

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!

Deja una respuesta

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

Para ofrecer las mejores experiencias, utilizamos tecnologías como las cookies para almacenar y/o acceder a la información del dispositivo. El consentimiento de estas tecnologías nos permitirá procesar datos como el comportamiento de navegación o las identificaciones únicas en este sitio. No consentir o retirar el consentimiento, puede afectar negativamente a ciertas características y funciones.    Más información
Privacidad