Usar Font Awesome en WordPress

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.
Añadir el cdn de Font Awesome al header.php
Añadir el cdn de Font Awesome al header.php

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…

Elegir el icono que vamos a utilizar
Elegir el icono que vamos a utilizar

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.

Vista previa icono Font Awesome
Vista previa icono Font Awesome

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

Instalar Font Awesome ne Divi
Instalar Font Awesome ne Divi


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja un comentario

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

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

He leído y acepto la política de privacidad de este sitio. *