Cómo usar correctamente Font Awesome en tu WordPress
Esta semana vamos a aprender a usar correctamente Font Awesome en nuestra instalación de WordPress. Continuamos con la serie acerca de cómo podemos utilizar tipografías externas en nuestro WordPress, la semana pasada hemos vistos cómo podemos instalar Google Fonts, y esta semana aprenderemos a usar correctamente Font Awesome.
Porqué utilizar Font Awesome
Seguramente habrás visto en alguna página web que el menú de navegación tiene un icono acompañando a cada ítem de navegación, lo normal es que se utilicen los iconos de Font Awesome, pero también hay otras opciones en el mercado. Para añadir estos iconos, puedes utilizar un plugin como Menu Icons by ThemeIsle
En este artículo vamos a ir más allá, añadiendo los iconos a WordPress para que puedas utilizarlos, no solo en el menú de navegación, sino en cualquier sitio donde puedas insertar iconos.
Cómo añadir Font Awesome a nuestro WordPress
La forma de añadir esta tipografía es muy sencilla, tan solo tenemos que seguir estos pasos:
- Ir a la página de Font Awesome.
- Seleccionar el código que nos proponan. En mi caso y para este ejemplo, el código es el siguiente:
<link rel=»stylesheet» href=»https://use.fontawesome.com/releases/v5.8.2/css/all.css» integrity=»sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay» crossorigin=»anonymous»>
- A continuación, debemos pegar este script en el <head> de nuestra página web. Para ello, debemos acceder al archivo header.php de nuestro tema (está en la carpeta wp-content/themes/tu-tema) o Child Theme.
- Abrimos este archivo y pegamos dentro ese código. Guarda los cambios.
Ya sabes que a mí me gusta pegarlo antes del cierre de la etiqueta head, es decir, antes del </head>.
Así de sencillo es este proceso, ya podríamos utilizar estos iconos en nuestro WordPress.
Cómo usar los iconos Font Awesome
Evidentemente, para poder utilizar estos iconos, debemos saber el nombre de aquel o aquellos que vamos a utilizar. Para saber los nombres de los iconos, volvemos a la página web de Font Awesome, vamos al apartado Icons. Nos aparecen todos los iconos, podemos hacer un clic sobre alguno de ellos para ver su nombre, podemos buscar por el tema en el buscador superior, podemos buscar por sus atributos en la parte izquierda…
Una vez que tenemos un icono elegido, le hacemos un clic y nos lleva a una página con toda la información de ese icono, así como sus variaciones. Pulsamos el botón Start Usign This Icon y nos aparece un popup con el código HTML de inserción del icono. En mi caso este es el código que tengo que utilizar:
<i class="fas fa-anchor"></i>
A continuación lo pegamos en una entrada o página, guardamos e iremos a la vista previa para ver cómo queda.
¿Qué ocurre si trabajas con Divi y quieres añadir estos iconos al tema?
No hay ningún problema, ya que la forma de usar estos iconos no cambia, pero sí tienes que saber dónde hay que pegar el cdn de Font Awesome.
Debemos ir a Divi, Opciones del tema, se abrirá una ventana y hacemos clic en la ficha Integración. Bajamos hasta el apartado Agregar código al <head> de su blog y pegamos ahí el código.
