¿Sabes cómo usar iconos Font Awesome en WordPress?, ¿Te gustaría tener contenidos más llamativos?, utilizar iconos en WordPress facilita la comprensión del mensaje que quieres transmitir.
Por eso, utilizar los iconos Font Awesome (font awesome icon) dentro de tú estrategia de contenidos es una gran ventaja, gracias a que ofrecen muchas flexibilidad, gran variedad y se adaptan a cualquier tipo de diseño.
Existen muchas formas de agregar este tipo de iconos en WordPress desde agregar iconos Font Awesome con CSS, hasta instalar las fuentes localmente en tu servidor de hospedaje.
Aprender a utilizar iconos Font Awesome en WordPress adecuadamente además de darle un aspecto profesional a tu sitio WEB, puede reducir el peso de tus contenidos.
¿Qué encontrarás en este artículo?
¿Qué es Font Awesome Icons?
Los iconos Font Awesome son un framework o librería de iconos vectoriales utilizados para cambiar imágenes de iconos por gráficos vectoriales convertidos en fuentes.
La librería es un proyecto creado por David Gandy y en la actualidad se encuentra en la versión 5.15.4 y pronto saldrá la versión 6, si quieres conocer más sobre este proyecto puedes visitar la WEB de los Font Awesome Icons.
Existen 2 tipos de licencias una Open Source con 1.608 iconos, que puedes utilizar libremente en cualquier tipo de proyecto sea personal o comercial y la otra es una versión paga que contiene 7.864 iconos.
6 ventajas de utilizar iconos Font Awesome en WordPress
- Existen más de 1.500 iconos disponibles en la librería gratuita, porque siempre tendrás una imagen acorde a lo que quieras representar.
- Como los iconos Font Awesome son imágenes vectoriales puedes ajustarlos al tamaño que necesites sin que pierdan su definición.
- Puedes utilizar iconos Font Awesome en WordPress o en cualquier sitio WEB sin tener que emplear archivos JavaScript.
- Los iconos Font Awesome son compatibles con la mayoría de navegadores y dispositivos por lo que se ven bien hasta en pantallas de alta resolución.
- Aunque en un inicio fueron diseñados para usarlos en Bootstrap puedes utilizar los iconos Font Awesome con otros frameworks y librerías.
- Es muy fácil adaptar los iconos Font Awesome al diseño de tu WEB porque puedes modificarlos mediante propiedades de estilos CSS entre las que están color, size y muchas otras.
3 desventajas de utilizar iconos Font Awesome en WordPress
- Las fuentes Font Awesome pueden afectar el rendimiento de la WEB, debido a que son otra fuente adicional que estás agregando, por lo tanto no se pueden optimizar o comprimir.
- Así sea que hagas un llamado a la fuente desde una librería externa o las tengas alojadas en la WEB, aumentarás el número de archivos y peticiones que necesitas para mostrar tus contenidos.
- Al usar iconos Font Awesome en WordPress se cargan todas las fuentes Font Awesome en tus contenidos para mostrar solo unos cuantos, por eso estarás aumentando el peso de tus contenidos más de la cuenta.
¿Cómo buscar iconos Font Awesome?
Para utilizar iconos Font Awesome en WordPress lo primero que debes hacer es conseguir el icono que necesitas, puedes ir a la galería del sitio WEB Font Awesome y buscar el que necesites, así podrás obtener el nombre que utilizaras para realizar el diseño.
El único inconveniente es que debes buscar el nombre en inglés, por ejemplo si quisieras realizar el icono de una casa tendrías que escribir “house”, lo bueno es que la herramienta va encontrando los resultados a medida que escribes cada letra.
Como puedes ver en el ejemplo para la palabra “house” existen 476 resultados (iconos), los que ves claros corresponden a la versión paga de la librería Font Awesome y los más oscuros a la versión gratuita.
Para descubrir el nombre del icono Font Awesome solo debes hacer clic en la imagen gratuita que desees y abrirá otra pantalla donde aparecerá el icono más grande, en la parte superior verás la etiqueta HTML que necesitas para mostrarlo en tu WEB.
¿Cómo mostrar iconos Font Awesome en WordPress?
Para utilizar los iconos Font Awesome en WordPress o en cualquier otro sitio WEB, después de hacer referencia a la librería Font Awesome con Gutenberg solo debes agregar un bloque de HTML y colocas el icono Font Awesome entre sus respectivas etiquetas, por ejemplo:
<i class="fab fa-wordpress"></i>
<i class="fa fa-search"></i>
<i class="fa fa-coffee"></i>En el editor clásico de WordPress es un poco más complejo porque es necesario trabajar con la pestaña HTML en vez del editor visual y es allí donde debes agregar el código anterior.
¿Cómo utilizar iconos Font Awesome en WordPress?
Existen muchas maneras de insertar Font Awesome en WordPress para poder utilizar este tipo de fuentes en tus contenidos, están son las 5 formas que he probado:
Usar iconos Font Awesome en WordPress desde la librería en Internet
Una de las maneras de colocar iconos Font Awesome en WordPress es agregar un llamado a la librería que se encuentra en Internet y puedes hacerlo de 2 maneras las cuales son:
Colocar un llamado a la librería Font Awesome en el Header de la WEB
Para hacer esto debes ubicar el archivo header.php del tema que tengas activo en el menú Apariencia ► Editor de temas y buscar el cierre de la etiqueta </header> y antes de esa línea coloca la siguiente sentencia.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" />Luego de esto podrás mostrar fuentes Font Awesome en cualquier parte de tu sitio WEB, sin embargo colocar código dentro del archivo header.php de tu WEB puede traer inconvenientes y hasta dañar el tema de WordPress, además este procedimiento puede ser incompatible con algunos plugins.
Colocar un llamado a la librería Font Awesome en el archivo functions.php de WordPress
Otra forma de incluir los iconos Font Awesome en WordPress es ubicar el archivo functions.php del tema que tengas activo en el menú Apariencia ► Editor de temas y colocar la siguiente función.
/* Funcion para mostrar iconos Font Awesome */
add_action('wp_enqueue_scripts','enqueue_load_fa');
function enqueue_load_fa(){
wp_enqueue_style('load-fa','https://use.fontawesome.com/releases/v5.5.0/css/all.css');
}
Luego de esto ya podrás mostrar las fuentes Font Awesome en tu sitio WEB, sin embargo, al igual que con el archivo header.php, manipular el archivo functions.php puede hacer que el WordPress deje de funcionar, si no se hace de la forma correcta.
Además, en ambos casos al actualizar WordPress perderás todos los cambios, por eso si te decides por estas opciones, como consultor WordPress te recomiendo que utilices un tema hijo o un plugin personalizado.
Usar iconos Font Awesome en WordPress alojados en la WEB
Lo primero que debes hacer para usar iconos Font Awesome en WordPress de forma local es bajarte la librería de iconos, para ello vas a la página WEB de Font Awesome y bajas hasta la parte donde dice “Download”.
Después de presionar el botón irás a la zona de descarga donde debes presionar el botón “Download Font Awesome Free for the WEB” y comenzará a descargarse en tu computador el archivo comprimido con la última versión de la librería Font Awesome.
Luego descomprime el archivo y busca las carpetas “CSS” y “Webfonts” los cuales serán necesarios para instalar las fuentes Font Awesome localmente en tu servidor WEB.
Posteriormente crea una carpeta llamada “fontawesome” en el tema que tengas activo en tu instalación de WordPress en el servidor de hosting y sube mediante FTP las carpetas “CSS” y “Webfonts” librería de Font Awesome.
Ahora para usar iconos Font Awesome en WordPress solo debes en ubicar el archivo functions.php del tema y agregar la siguiente función:
/* Función para mostrar iconos Font Awesome */
function ala_load_fa(){
wp_enqueue_style('ala-fa',get_stylesheet_directory_uri() . '/fontawesome/css/all.css');
}
add_action('wp_enqueue_scripts','ala_load_fa');
Al agregar esta función podrás utilizar fuentes Font Awesome en WordPress, puedes personalizarlo con algún estilo mediante CSS para adaptarlo mejor al diseño de tu sitio WEB.
Usar iconos Font Awesome en WordPress con un plugin
En el repositorio de WordPress puedes encontrar varios plugins que te pueden ayudar a colocar iconos Font Awesome en tus contenidos, uno de los más utilizados es el Better Font Awesome.
Una ventaja que tiene este plugin de WordPress es que con cada actualización se van añadiendo iconos nuevos de la librería Font Awesome.
Para instalar el plugin Better Font Awesome, lo que debes hacer es ir a la sección de “Plugins” del menú lateral izquierdo de tu administrador de WordPress y buscar la opción “Añadir Nuevo”.
En el buscador de plugins escribes la palabra “Better Font Awesome” para que aparezcan todos los plugins con esa palabra relacionada.
Luego buscas la imagen donde aparece el acceso a la página de plugin y presionas el botón de “Instalar Ahora” para descargar plugin Better Font Awesome e instalarlo en tu sitio WEB.
Ya con eso instalas el plugin Better Font Awesome, el siguiente paso es activarlo, si todo está conforme a lo anterior en la sección donde te “Instalar Ahora”, te aparece un botón de color azul que dice “Activar”.
Una vez lo actives ya podrás utilizar la fuente Font Awesome en tus contenidos, si estas utilizando el editor de Gutenberg lo puedes hacer a través de la inserción de un Shortcode como el siguiente:
[icon name=" hippo " style="solid" class="" unprefixed_class=""]Para utilizar el plugin Better Font Awesome en el editor clásico de WordPress solo debes pararte en la parte del texto donde quieras colocar el icono y presionas el botón “Insert Icon” para que muestre todos los iconos Font Awesome que tienes disponible.
A lo que hagas clic sobre el icono que quieras seleccionar veras como en el texto es agregado un Shortcode con el nombre del icono en una estructura como la siguiente:
[icon name=" hippo " style="solid" class="" unprefixed_class=""]Uno de los inconvenientes de este plugin es que para personalizar los iconos tienes que emplear código CSS por lo que tendrás que agregar clases para poder ajustarlos al diseño de tu WEB.
Por ejemplo, si quieres ajustar el tamaño y el color puedes ir a ajustes del tema que tengas activado, en la parte de CSS personalizado deberias agregar un código como el siguiente:
i.fa.fa-hippo.fa-myhippo{
font-size:150px;
color:#f47321;
}
Luego para que se vean los cambios es necesario quitar la etiqueta style =”solid” gregas las clase en la etiqueta class al Shortcode, quedando de la siguiente manera:
[icon name="hippo" class="myhippo" unprefixed_class=""]Usar iconos Font Awesome en WordPress convirtiéndolos en SVG
Los archivos SVG (Scalable Vector Graphics) es un formato de imagen vectorial basado en XML para gráficos de dos dimensiones que poseen soporte para la interactividad y la animación que funcionan similar a los iconos.
Al ser imágenes vectoriales los puedes escalar hacia arriba o hacia abajo sin perder la resolución o la definición, además de ser muy livianos por eso al usarlo en tus contenidos no afectan los tiempos de carga.
Para hacer un ejemplo de utilizar iconos Font Awesome en WordPress, imagínate que utilizaras el icono “house-user”, luego vas a la herramienta de Iconify colocas el nombre y presionas el botón “Search Icons”, en este caso puedes ver que esta librería ha encontrado 5 iconos.
Como puedes ver las imágenes que se muestran en Iconify son diferentes a las que se muestran en el sitio WEB de Font Awesome, eso se debe a las versiones de cada una de las librerías.
Sin embargo para seguir con el ejemplo de iconos Font Awesome en WordPress usaras el primero de la lista, para seleccionarlo solo debes hacer clic en la imagen y posteriormente irás a la parte de abajo para que puedas cambiar el diseño del icono.
En la zona de diseño de la librería Iconify puedes cambiarle diferentes características como el color, el tamaño, la rotación del icono y otras características más para ajustarlo a tu diseño.
Una vez realices todos los cambios es necesario que presiones el botón de “SVG” para que se genere el código necesario para mostrar el icono Awesome como una imagen SVG.
Sin embargo, para poder utilizar iconos Font Awesome en WordPress como imágenes SVG, es necesario que copies todo el código Font Awesome que aparece el cuadro y llevarlo a otra herramienta que te permita transformarlo en una imagen CSS, puedes hacerlo con URL-encoder for SVG.
URL-encoder for SVG es una herramienta WEB muy sencilla de utilizar, solo tienes que colocar el código Font Awesome copiado en la casilla que dice “Insert SVG” y automáticamente verás que se llenan las tres casillas restantes.
Para este ejemplo sería lo siguiente:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1.13em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 576 512"><path d="M570.69 236.27L512 184.44V48a16 16 0 0 0-16-16h-64a16 16 0 0 0-16 16v51.67L314.78 10.3C308.5 4.61 296.53 0 288 0s-20.46 4.61-26.74 10.3l-256 226A18.27 18.27 0 0 0 0 248.2a18.64 18.64 0 0 0 4.09 10.71L25.5 282.7a21.14 21.14 0 0 0 12 5.3a21.67 21.67 0 0 0 10.69-4.11l15.9-14V480a32 32 0 0 0 32 32H480a32 32 0 0 0 32-32V269.88l15.91 14a21.94 21.94 0 0 0 10.72 4.12a20.89 20.89 0 0 0 11.87-5.31l21.41-23.81a21.64 21.64 0 0 0 4.09-10.69a21 21 0 0 0-5.31-11.92zM288 176a64 64 0 1 1-64 64a64 64 0 0 1 64-64zm112 272H176a16 16 0 0 1-16-16a96 96 0 0 1 96-96h64a96 96 0 0 1 96 96a16 16 0 0 1-16 16z" fill="currentColor"/></svg>
Luego para agregar este icono Font Awesome a tu biblioteca de medios en WordPress, lo que debes hacer es dirigirte al cuadro que dice “Ready for CSS” y copiar todo lo que está dentro de las comillas después del paréntesis de url.
Para este ejemplo sería lo siguiente:
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' aria-hidden='true' role='img' width='1.13em' height='1em' preserveAspectRatio='xMidYMid meet' viewBox='0 0 576 512'%3E%3Cpath d='M570.69 236.27L512 184.44V48a16 16 0 0 0-16-16h-64a16 16 0 0 0-16 16v51.67L314.78 10.3C308.5 4.61 296.53 0 288 0s-20.46 4.61-26.74 10.3l-256 226A18.27 18.27 0 0 0 0 248.2a18.64 18.64 0 0 0 4.09 10.71L25.5 282.7a21.14 21.14 0 0 0 12 5.3a21.67 21.67 0 0 0 10.69-4.11l15.9-14V480a32 32 0 0 0 32 32H480a32 32 0 0 0 32-32V269.88l15.91 14a21.94 21.94 0 0 0 10.72 4.12a20.89 20.89 0 0 0 11.87-5.31l21.41-23.81a21.64 21.64 0 0 0 4.09-10.69a21 21 0 0 0-5.31-11.92zM288 176a64 64 0 1 1-64 64a64 64 0 0 1 64-64zm112 272H176a16 16 0 0 1-16-16a96 96 0 0 1 96-96h64a96 96 0 0 1 96 96a16 16 0 0 1-16 16z' fill='currentColor'/%3E%3C/svg%3EPor último, editas la sección de tu sitio WEB donde quieres colocar esta imagen SVG y le das agregar una imagen, sin embargo, en vez de decirle que desde la librería de medios de WordPress, seleccionas desde una url.
Para terminar y poder utilizar iconos Font Awesome en WordPress, solo pega el código que copiaste y presiona el botón de aceptar para que ya puedas ver la imagen SVG codificada en tu sitio WEB.
Inconvenientes al utilizar iconos Font Awesome en WordPress cómo SVG
Si cuando agregas iconos Font Awesome en WordPress como archivos SVG no logras verlos, lo primero que debes revisar es que hayas realizado los pasos correctamente y que al copiar el código del SVG no estén las comillas.
Otro factor que puede influir si estás utilizando un builder como Elementor Pro es que tengas que activar el uso de SVG, sin embargo en Gutenberg no es necesario hacer nada.
Usar iconos Font Awesome en WordPress convirtiéndolos en PNG
Si no quieres utilizar imágenes SVG otra manera de usar iconos Font Awesome en WordPress es convirtiéndolos en un formato de imagen y después subirlo como archivo a la librería multimedia de WordPress para colocarlos en tus contenidos.
Para hacer esto puedes utilizar la aplicación gratuita Font Awesome 2 PNG que funciona de una forma muy similar a la herramienta Iconify con la ventaja que te permite descargar el archivo PNG.
Como puedes ver es una herramienta muy sencilla ya que solo te permite cambiar el tamaño del icono Font Awesome, además del color, sin embargo puede funcionar para la mayoría de los casos.
Para usar iconos Font Awesome en WordPress con esta herramienta, solo debes colocar el nombre del icono en la parte que dice “Icon Name” y al igual que con la herramienta Iconify cada vez que escribas irá buscando las coincidencias, sin embargo tiene el inconveniente que no muestra las imágenes hasta que selecciones un icono.
Luego de que selecciones uno, podrás ajustar el tamaño y color de la imagen para que cuando uses los iconos Font Awesome en WordPress el archivo se adapte al diseño de tu WEB.
Recomendaciones finales sobre cómo usar iconos Font Awesome en WordPress
Cómo pudiste ver al utilizar iconos Font Awesome en WordPress haces que tus contenidos sean más llamativos y dándole un toque profesional, además de mejorar el mensaje que quieras transmitir a tu público objetivo.
Entre las diferentes formas de insertar Font Awesome en WordPress que pudiste ver en este artículo, en base a mi experiencia como consultor WordPress y especialista en WPO te recomiendo utilizar iconos Font Awesome convertidos en imágenes, ya sean SVG o PNG
Si todavía tienes dudas sobre cómo agregar iconos Font Awesome en WordPress en tus contenidos, puedes hacer contacto conmigo y así me cuentes como te puedo ayudar. Además, si necesitas ayuda con el desarrollo o mantenimiento WEB, puedes ver los servicios que ofrezco en asesoría y soporte para tu negocio.
En la parte de abajo, déjame un comentario contándome qué te pareció este artículo y si te ayudo a saber cómo instalar Font Awesome en WordPress, o también si tienes alguna duda, sugerencia o reclamo y así podré contar con tu valioso aporte.
