Cómo Añadir Font Awesome a WordPress: 3 Métodos Sencillos 

Subes un icono social como PNG, se ve bien en tu portátil y luego abres el sitio en tu teléfono y los bordes se han suavizado. Cambias el color de tu marca seis meses después y vuelves a un editor de imágenes para reexportar todo el conjunto.

Font Awesome soluciona ambos problemas, porque sus iconos son formas vectoriales que reestilizas con un selector de color en lugar de una aplicación gráfica.

Hay tres formas de introducirlo en WordPress, y durante mucho tiempo las tuve en el orden incorrecto en esta página. El plugin gratuito oficial es la ruta más fácil para la mayoría de la gente, así que empezaré por ahí.

Métodos para añadir Font Awesome a WordPress:

• ¿Qué es Font Awesome y por qué usarlo?
• 1. Añadir Font Awesome con el plugin oficial
• 2. Añadir Font Awesome en cualquier lugar de tu diseño con SeedProd
• 3. Añadir Font Awesome manualmente con código
• ¿Qué método deberías usar?
• Preguntas frecuentes sobre cómo añadir Font Awesome a WordPress

¿Qué es Font Awesome y por qué usarlo?

Font Awesome es una biblioteca de iconos, por lo que en lugar de subir una imagen para cada flecha, símbolo de teléfono y logo social, eliges uno de una lista y lo arrastras a tu página.

Los iconos son vectores en lugar de imágenes, por lo que se mantienen nítidos a cualquier tamaño y los reestilizas como si estilizaras texto.

También son mucho más ligeros que los PNG que reemplazan, lo que ayuda si estás trabajando en hacer tu sitio de WordPress más rápido.

La cantidad de iconos que obtienes depende de la ruta que tomes, y los números se citan de forma imprecisa, así que aquí tienes uno al que puedo señalar. Abrí SeedProd 6.20.9 en mi propio sitio de prueba y conté la biblioteca de iconos con la que viene: 2.420 iconos, de Font Awesome Free 6.6.0.

También se renderizan de forma consistente en navegadores y dispositivos modernos, y puedes cambiar el color, el tamaño y la alineación sin tocar un archivo de imagen. Esa última parte es la verdadera victoria, porque es la diferencia entre un ajuste de color que lleva diez segundos y uno que lleva una tarde.

A continuación, vamos a añadirlo a tu sitio.

1. Añadir Font Awesome con el plugin oficial (lo más fácil)

Si solo quieres iconos dentro de tus entradas y páginas, empieza aquí. El plugin oficial de Font Awesome es gratuito, está creado por el equipo de Font Awesome y te ahorra tener que gestionar tú mismo las hojas de estilo.

Comprobaría que todavía se mantiene activamente antes de instalar cualquier plugin de iconos, porque muchos se abandonan. Cuando miré su listado en WordPress.org, estaba en la versión 5.2.1, actualizado en agosto de 2026 y probado contra WordPress 7.1, que es lo más actual que se puede esperar de los listados de plugins.

Instálalo desde Plugins › Añadir nuevo como harías con cualquier otro plugin, y luego actívalo. Si no lo has hecho antes, hay una guía para principiantes sobre cómo instalar un plugin de WordPress que te lo explica paso a paso.

Añadir un icono con el bloque Font Awesome

Una vez que el plugin esté activo, abre cualquier entrada o página y añade el bloque Icono de Font Awesome.

Haz clic en Elegir icono y se abrirá el selector de iconos.

Desde allí puedes buscar por nombre de icono, por categoría o por palabra clave, y cambiar la Familia y el Estilo con los menús desplegables si quieres una versión más ligera o más pesada de la misma forma. Haz clic en el icono que quieras y se insertará en tu contenido.

Si prefieres poner un icono en medio de una frase en lugar de en una línea propia, resalta el texto y elige Font Awesome en la barra de herramientas de formato. Eso abre el mismo selector de iconos y necesita WordPress 6.3 o posterior.

Añade iconos de Font Awesome con un shortcode

Esta página solía enseñar el shortcode como la forma principal de entrada, pegado en un bloque de shortcode. Ese era el consejo equivocado para cualquiera que usara el editor de bloques, y el bloque de arriba es lo que quieres en su lugar.

Los shortcodes todavía funcionan, y son a lo que la documentación del plugin te dirige si estás en el editor clásico. Añade el nombre del icono que quieres:

[icon name="rocket"]

Cambia "rocket" por lo que necesites, y omite el prefijo `fa-` del nombre. Sin estilo especificado, obtendrás la versión Sólida Clásica del icono.

Para pedir un peso concreto, añade un prefijo:

[icon name="rocket" prefix="fa-sharp fa-light"]

Para encontrar el nombre de un icono, navega por la galería en fontawesome.com/icons y haz clic en el que quieras.

Copia el nombre, pégalo en tu shortcode y publica.

Este método tiene un límite real. Pone iconos en tu contenido, lo cual está bien hasta que quieres uno en la cabecera de tu sitio, en un menú, o en una página de destino que has diseñado tú mismo. Para eso necesitas algo que edite el diseño en lugar de la entrada.

2. Añadir Font Awesome en cualquier lugar de tu diseño con SeedProd

SeedProd es un creador de sitios web de arrastrar y soltar para WordPress, por lo que diseñas páginas y plantillas visualmente en lugar de editar archivos de temas. Yo construyo con él en mi propio sitio, y los iconos son una de las cosas que hace realmente rápidas.

La razón para usarlo aquí es la ubicación. Como estás editando el diseño, puedes poner un icono de Font Awesome en una cabecera, un pie de página, una barra lateral o una página de destino, y nada de eso necesita clases HTML o CSS.

Así es como los añado.

Paso 1. Instalar y Activar SeedProd

Instala y activa SeedProd en tu sitio. Hay una versión gratuita, y los bloques Icon y Icon Box que uso a continuación están disponibles en todos los planes de pago, por lo que Basic te cubre si ahí es donde empiezas.

Después de activar, serás llevado a la pantalla de licencia. Pega tu clave de licencia y haz clic en Verificar clave. Puedes volver a ella en cualquier momento desde SeedProd › Ajustes › Clave de licencia.

Tu clave vive en tu cuenta en el sitio web de SeedProd, en la sección de Descargas.

Paso 2. Nombra tu página y elige una plantilla

Ve a SeedProd › Páginas de destino y haz clic en Añadir nueva página de destino.

Primero nombra tu página. SeedProd crea una URL a partir del nombre mientras escribes, y puedes cambiarla más tarde en la configuración de la página.

Luego haz clic en Siguiente: Elegir plantilla y selecciona un diseño para empezar.

Cualquier plantilla se puede personalizar de arriba a abajo, así que elige la que más se acerque a lo que buscas en lugar de darle vueltas. Hay una opción en blanco si prefieres empezar desde cero.

SeedProd abre entonces la página en el editor visual.

Paso 3. Añadir iconos de Font Awesome

El editor muestra una vista previa en vivo de tu página a la derecha, con bloques y ajustes a la izquierda.

Haz clic en cualquier bloque que ya esté en la página y sus ajustes se abrirán en esa barra lateral izquierda, donde puedes cambiar el contenido, los colores, los fondos y las fuentes.

Para añadir un icono, busca el bloque Icono en Diseño y arrástralo a tu diseño.

Se inserta con una flecha por defecto. Con el bloque seleccionado, haz clic en el botón Biblioteca de Iconos en el panel de ajustes para cambiarlo.

Eso abre el selector con los 2.420 iconos que contiene. Desplázate o escribe lo que buscas en el cuadro de búsqueda, que es más rápido una vez que sabes aproximadamente cómo se llama el icono.

Haz clic en él y aparecerá en tu diseño. Luego puedes establecer su color, tamaño, alineación y enlace.

Si quieres que el icono lleve consigo un encabezado y una línea de texto, usa el bloque Icon Box en su lugar. Se comporta de la misma manera, con espacio para el texto adicional. Yo recurro a este para las secciones de características, donde un icono solo no dice lo suficiente.

Otros dos bloques utilizan el mismo conjunto de iconos, y vale la pena conocerlos porque te ahorran la colocación manual de iconos.

El bloque Perfiles Sociales maneja iconos personalizados de redes sociales como un conjunto, por lo que no estás arrastrando un icono por red.

Y si tienes una tienda, el bloque Carrito del Menú pone un icono de carrito de compras en tu menú.

Paso 4. Publica tus cambios

Haz clic en Guardar, luego en Publicar para poner la página en vivo.

Visita la página y comprueba los iconos en un par de tamaños de pantalla antes de continuar.

3. Añadir Font Awesome manualmente con código

También puedes cargar Font Awesome tú mismo y saltarte el plugin por completo. Yo solo haría esto si te sientes cómodo editando archivos del tema, porque un error tipográfico aquí puede tumbar todo el sitio en lugar de solo romper un icono.

El fragmento a continuación carga la hoja de estilos desde una CDN. Pertenece al functions.php de un tema hijo, nunca al tema padre, o la próxima actualización del tema lo borrará.

function my_theme_font_awesome() {
    wp_enqueue_style(
        'font-awesome',
        'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css',
        array(),
        '6.6.0'
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_font_awesome' );

Con eso en su lugar, escribes iconos como HTML dondequiera que puedas añadir HTML:

<i class="fa-solid fa-rocket"></i>

Honestamente, ya no edito functions.php para esto. Guardo fragmentos como este en WPCode, porque el código entonces sobrevive a un cambio de tema y puedo activarlo o desactivarlo sin abrir un editor de archivos.

¿Qué método deberías usar?

La pregunta que realmente separa estos tres es dónde quieres que aparezca el icono, no lo fácil que es configurarlo.

M extasciitildeetodo	Dónde pueden ir los iconos	¿Necesita código?	Coste
Plugin oficial de Font Awesome	Dentro de publicaciones y páginas, incluso a mitad de frase	No	Gratis
SeedProd	En cualquier lugar del diseño: cabeceras, pies de página, menús, páginas de destino	No	Icono e Icon Box en cualquier plan de pago
Código manual	En cualquier lugar donde puedas escribir HTML	Sí	Gratis

Para la mayoría de las personas que escriben publicaciones, el plugin oficial es la respuesta correcta y me detendría ahí. Es gratuito, lo mantienen las personas que crean los iconos y el Selector de Iconos es más rápido que buscar un nombre de clase.

Donde falla es en todo lo que está fuera de tu contenido. Si el icono necesita estar en una cabecera, un pie de página, un menú o una página que hayas diseñado tú mismo, SeedProd es lo que uso, porque en ese momento estoy editando el diseño en lugar de la publicación.

La ruta manual vale la pena en un caso: quieres fijar una versión específica de Font Awesome y prefieres no añadir un plugin para ello. De lo contrario, asumirás un trabajo de mantenimiento sin una ganancia real.

Preguntas frecuentes sobre cómo añadir Font Awesome a WordPress

¿Es Font Awesome gratuito para usar en un sitio de WordPress?

Sí, el conjunto gratuito cubre la mayoría de los sitios, y es lo que tanto el plugin oficial como SeedProd te ofrecen de serie. Font Awesome vende una suscripción Pro para la biblioteca de iconos más grande y estilos adicionales, pero no la necesitas para poner iconos en una página.

¿Por qué mis iconos de Font Awesome se muestran como cuadrados vacíos?

Normalmente, la hoja de estilos no se está cargando, o se están cargando dos versiones diferentes de Font Awesome y están luchando entre sí, lo que ocurre cuando tu tema incluye una y un plugin incluye otra. El plugin oficial tiene un escáner de conflictos incorporado que encuentra las otras copias por ti.

¿Hace Font Awesome que mi sitio sea más lento?

Añade una solicitud de hoja de estilos, así que la respuesta honesta es un poco, pero mucho menos que los archivos de imagen que reemplaza. La versión que puede perjudicar es cargar toda la biblioteca dos veces, que es el mismo problema de conflicto que el anterior.

¿Puedo poner un icono de Font Awesome en mi menú de WordPress?

No a través de la pantalla estándar de Apariencia y Menús, que solo admite texto plano. O bien crearías el menú en una herramienta que admita iconos, como las plantillas de cabecera de SeedProd, o añadirías el marcado del icono a mano una vez que Font Awesome esté cargando.

¿Cómo cambio el tamaño y el color de un icono?

En SeedProd, estableces ambos en el panel de configuración del bloque con un deslizador y un selector de color. En HTML, lo aplicas como texto, o usas las propias clases de tamaño de Font Awesome como fa-2x.

¿Necesito SeedProd Pro para los bloques de iconos?

No. La documentación de SeedProd enumera tanto el bloque Icono como el bloque Caja de Iconos como disponibles en todos sus planes de licencia, por lo que Básico los incluye. Esta página solía decir que necesitabas Pro para la Caja de Iconos, lo cual era incorrecto.

¿Listo para añadir iconos a tu sitio de WordPress?

Elige según dónde necesites que viva el icono. Publicaciones y páginas, usa el plugin oficial y habrás terminado en unos dos minutos.

Si es tu cabecera, pie de página o una página que has diseñado, para eso están los bloques Icono y Caja de Iconos de SeedProd, y están en todos los planes de pago en lugar de estar bloqueados detrás del nivel superior.

En cualquier caso, cambiar un color más tarde lleva un clic en lugar de una reexportación, que es la razón por la que dejé de usar archivos de imagen para esto.

A continuación, es posible que desees editar un menú en WordPress para organizar tu navegación, o echar un vistazo a los mejores temas de WordPress si todavía estás eligiendo un diseño.

¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.