Como Usar Iconos de Font Awesome en WordPress

Seguramente os haya pasado que los iconos a las redes sociales que tenéis en vuestro WordPress no son de vuestro agrado porque tienen una estética algo desfasada. O que queréis insertar algún icono, pero no sabemos muy bien de donde descargarlo de forma legal. Pues para estos problemas, la solución es Font Awesome.

Los iconos de Font Awesome son un conjunto de iconos vectoriales escalables que se han convertido en un estándar web. En lugar de crear iconos personalizados o tener que buscar y/o comprar un conjunto de iconos para tu web, los iconos de Font Awesome nos permiten instalar, usar y personalizar fácilmente diferentes iconos de su repositorio.

Estos iconos pueden ser utilizados libremente por cualquier persona en un sitio web, un temas o un plugin. Incluso, podemos usarlos en proyectos no relacionados con el diseño web.

Si entramos en la web de Font Awesome, podremos ver como tienen dos tipos de licencias. Una gratuita, con 1388 iconos. Y una versión Pro, con 4357 iconos y tres estilos. Para acceder a esta última versión, tendremos que pagar una suscripción de 60$ al año. Esta suscripción nos incluye todas las actualizaciones de Font Awesome durante ese periodo. Si queréis más información, podéis echar un vistazo a su página de precios, además de ver todos los iconos que incluye, para ver si es la opción que mejor encaja para vosotros.

Pero, ¿porque deberíamos hacer uso de Font Awesome en nuestro WordPress por encima de otros iconos, o paquetes de iconos, que existen en Internet? Vamos a dar respuesta a esto.

Por qué deberíamos añadir Font Awesome en WordPress

Las razones por las que es una buena idea añadir el catálogo de Font Awesome son simples, pero no por ello menos buenas. Las podríamos resumir en estos puntos:

• Los iconos están en formato vectorial, por lo que se verán perfectamente en cualquier pantalla, y a cualquier resolución.
• Son totalmente personalizables. Podemos cambiar su tamaño, color e incluso animarlos.
• Funcionan en cualquier navegador, por lo que nos olvidaremos de cualquier tipo de incompatibilidad.

A lo que podríamos incluir un cuarto motivo. Hace unas semanas hablamos sobre el formato vectorial SVG y el uso en WordPress. Y en ese artículo comentamos que hay que tener cuidado al añadir este tipo de archivos desde webs de terceros. Pero con Font Awesome posiblemente estemos antes uno de los repositorios de SVG más fiables que podamos encontrar. Por lo que cualquier miedo que tengamos, se disipa de inmediato.

De hecho, podemos descargar su catálogo desde la propia web de Font Awesome en un archivo comprimido. Así, podemos utilizar sus iconos en nuestro software favorito de edición. En mi caso, tengo añadido Font Awesome en el panel de Recursos de Affinity Designer. Una buena forma de tenerlo siempre a mano en mis proyectos,

Una vez hecha esta pequeña introducción, explicaremos dos métodos por los cuales podemos usar Font Awesome en nuestro WordPress. Y como viene siendo habitual, uno lo haremos de forma manual, mientras que en el otro nos ayudaremos de un plugin.

Método 1 – Añadir Iconos de Font Awesome de forma Manual

La mejor manera si no queremos recargar nuestro WordPress de plugins. Eso sí, y como cada vez que vamos a añadir código en nuestro editor, recomendamos hacerlo sobre un tema hijo de nuestra plantilla. Una vez hecha esta advertencia, continuemos.

Ya sabemos que debemos ir, desde el panel de administración de WordPress, a Apariencia > Editor. Una vez dentro, en el explorador de archivos de la derecha, buscaremos el archivo Funciones del tema, o functions.php. En este archivo, copiaremos el siguiente pedazo de código:

add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
wp_enqueue_style( 'load-fa', 'https://use.fontawesome.com/releases/v5.3.1/css/all.css' );
}

Y guardamos. Ya tenemos Font Awesome totalmente funcional en nuestra web. Vaya, incluso yo me he sorprendido de lo rápido que ha sido. Pero queda la siguiente duda: ¿como insertamos un icono de Font Awesome en una entrada de WordPress? Pasemos al siguiente párrafo para verlo.

Dentro de la web de Font Awesome, tenemos disponible la galería completa de iconos. Si entramos en uno cualquiera, por ejemplo, el icono de WordPress, veremos que justo debajo del título aparece un código HTML.

<i class="fab fa-wordpress"></i>

Este es el código que debemos insertar en nuestra entrada. De hecho, desde Font Awesome nos lo ponen fácil, y con solo clicar sobre el código, lo pegaremos de forma automática en nuestro portapapeles.

Una advertencia. Cuando peguemos este código en nuestra entrada, debemos hacerlo bajo la pestaña HMTL. Si lo hacemos en la pestaña Visual, WordPress es posible que no lo reconozca, y que no nos aparezca

Método 2 – Añadir Iconos de Font Awesome mediante un Plugin

Ya sabemos que el repositorio de plugins de WordPress es prácticamente infinito. Todo lo que necesitemos en nuestro WordPress, casi seguro que encontraremos solución en forma de plugin. Font Awesome no es una excepción. En esta ocasión, tenemos el excelente plugin de Mickey Kay, Better Font Awesome. Lo bueno del plugin es que en sus actualizaciones va añadiendo los nuevos iconos que entran dentro del catálogo de Font Awesome. Por lo que pocas veces nos quedaremos atrás con respecto al acceso al repositorio de iconos original.

Una vez que tengamos el plugin instalado y activado, vamos a crear una nueva entrada para darle uso. Lo primero que nos llamará la atención es el nuevo botón existente a la derecha del de Añadir objeto. Su nombre deja bastante claro para que sirve: Insertar icono.

Pulsando en el botón, se nos abrirá dos opciones. En una, podemos explorar manualmente entre todos los iconos disponibles. Y el otro es un buscador, que nos facilitará mucho la vida si vamos buscando algo en concreto, y no queremos perder mucho tiempo.

Y entre todo el catálogo existente, vamos a elegir el icono de WordPress. Así cerramos el círculo. Una vez seleccionado, no veremos el icono por ningún sitio. No nos alarmemos. En nuestro editor aparecerá un trozo de código como este:

[icon name="wordpress" class="" unprefixed_class=""]

Si guardamos y previsualizamos nuestra entrada, nuestro icono de WordPress estará ahí, gentileza de Font Awesome. El proceso de inserción es muy sencillo y visual. Pero claro, es un poco soso si dejamos el icono así, con su color y tamaño original. Así que empieza la hora de jugar con nuestro recién estrenados iconos.

Como Personalizar Iconos de Font Awesome en WordPress

Para personalizar los iconos de Font Awesome, haremos uso de nuestros conocimientos sobre HTML y CSS. Si eres novato en estos lenguaje, puede echar un vistazo a nuestro artículo sobre HTML y de iniciación al CSS. Seguro que te sacará de dudas, y te sentirás más cómodo al modificar los iconos.

Cambiar el Tamaño del Icono

Como hemos dicho al principio, los iconos de Font Awesome están en formato SVG, por lo que son totalmente escalables. ¿Y como cambiamos su tamaño? Muy fácil, solo hay que añadirle una clase a nuestro código HTML que hemos añadido para insertar el icono. Si queremos que el icono tenga el doble de tamaño, la clase a añadir el fa-2x. Si queremos el triple, fa-3x. Y así hasta el infinito.

Si hemos usado el método manual, y queremos doblar de tamaño el icono de WordPress que hemos usado antes, el código resultante sería este:

<i class="fab fa-wordpress fa-2x"></i>

Y si hemos añadido Font Awesome mediante un plugin, nos quedaría esto:

[icon name="wordpress" class="fa-2x" unprefixed_class=""]

Veis lo sencillo que es modificar el tamaño de un icono de Font Awesome. Pero no nos quedemos aquí y demos un pasito más. Vamos a cambiar también su color.

Cambiar el Color del Icono

Para cambiar el color, usaremos un poco de CSS. Solo tendremos, dentro del panel de administración de WordPress, a Apariencia > Personalizar. Una vez estemos dentro añadiremos un CSS Adicional. Tomaremos como base este código:

.fa-NOMBRE {
color: COLOR;
}

En él, deberemos modificar dos aspectos. Donde hemos puesto NOMBRE, lo cambiaremos por el nombre del icono que nos aparece en su código HTML. En este caso, wordpress. Y donde dice COLOR, insertaremos el código HEX del color que queramos que tenga el icono. Y como color, vamos a elegir el típico azul que rige el código de diseño de WordPress. Vamos a ser conservadores y respetuosos en este aspecto. Por lo que el código CSS que debemos añadir en el Customizer debe ser tal que así:

.fa-wordpress {
color: #00a0d2;
}

Tremendamente sencillo de cambiar el color de cualquier icono, sabiendo simplemente su nombre. Os animamos a que hagáis vuestras pruebas, y que deis rienda suelta a vuestros conocimientos sobre CSS para añadirle más atributos a los iconos.

Por ejemplo, añadirle transparencias, hacer que tengan otro color cuando pasemos el puntero por encima del icono. Incluso, si queremos ir un paso más allá, a animarlos. En uno de nuestros últimos SiloMag hablamos sobre Animista. Animista es una herramienta web en la que, de forma sencilla, podemos elegir entre diferentes tipos de animaciones, y darle algunas características. Su duración, retraso, dirección… Y automáticamente, nos genera un código CSS que simplemente habrá que copiar y pegar en nuestro Customizer. Nunca ha sido tan sencillo animar un elemento en nuestra web.

Como habéis podido ver, tanto el añadir Font Awesome a WordPress, como personalizar sus iconos son tareas que podemos hacer en relativamente poco tiempo. Y que darán un toque diferenciador a nuestra web. Podemos hacer que los iconos se ajusten cromáticamente mejor a la paleta de colores que tengamos en nuestro sitio. Podéis dejarnos en los comentarios