Un sitio web sin iconos parece un muro de texto de 2005. Pero dibujar iconos en Photoshop y lidiar con sprites no es divertido, especialmente si usted no es diseñador.

Font Awesome resuelve este problema desde 2012: es una biblioteca gratuita de más de 2000 iconos vectoriales que se comportan como texto normal. Cambie el color en CSS y el icono cambia de color. Aumente el tamaño de fuente y escala sin pixelación ni desenfoque.

En la práctica, la versión gratuita es suficiente para menús, botones y redes sociales. Si necesita duotonos y más de 30 000 iconos, existe Pro desde $60 al año. A continuación, tres formas de añadir Font Awesome a WordPress: desde la más sencilla hasta la instalación manual para quienes no le temen a functions.php.

💡 Resumen rápido:

• Instale el plugin oficial de Font Awesome desde el directorio de WordPress; toma un minuto y no requiere cambios de código
• Para control manual, conecte Font Awesome mediante CDN o Kit en el functions.php de su tema hijo
• Si usa Elementor, los iconos ya vienen integrados y no necesita un plugin aparte
• Después de conectarlo, cambie el tamaño, color y animación de los iconos mediante CSS o clases predefinidas

Qué es Font Awesome

Font Awesome es una fuente de iconos: en lugar de letras, contiene símbolos de iconos. El navegador los renderiza como gráficos vectoriales, por lo que los bordes se mantienen nítidos en cualquier pantalla y a cualquier escala. Sin PNGs, sprites ni srcset.

La biblioteca se divide en dos partes. La versión gratuita incluye cinco estilos: Solid, Regular, Brands, Duotone y Sharp. Pro añade Thin, Light y decenas de miles de iconos, además de la posibilidad de subir sus propios SVGs mediante Kit. Para un sitio de tarjeta de presentación o blog típico, Free cubre la gran mayoría de las tareas: flechas, redes sociales, búsqueda, carrito, casillas de verificación.

La principal ventaja sobre los iconos rasterizados es el control total mediante CSS. Color, tamaño, sombra, rotación, animación: todo se configura con clases sin ninguna edición gráfica.

Método 1: plugin oficial (recomendado)

El camino más seguro es instalar el plugin oficial de Font Awesome en WordPress.org. Lo publica el mismo equipo que crea la biblioteca. El plugin se actualiza en sincronía con los nuevos lanzamientos de iconos y no depende de su tema.

Cómo instalarlo:

Vaya a Plugins → Añadir nuevo. En la barra de búsqueda, escriba «font awesome» y pulse Enter.

Haga clic en Instalar ahora y luego en Activar.

Listo. Tras la activación, aparece un elemento de Font Awesome en el menú de Ajustes donde puede cambiar la fuente de los iconos (CDN o Kit), activar la compatibilidad con la versión cuatro y ejecutar el escáner de conflictos.

El plugin añade un bloque independiente «Icono de Font Awesome» al editor de bloques. Haga clic en él y se abre una búsqueda en toda la biblioteca. Seleccione un icono, haga clic en «Insertar» y aparecerá en el texto como SVG. El estilo se configura directamente en la barra lateral del bloque: tamaño, color, rotación.

Para el editor clásico, funciona un shortcode:

1
[icon name="download" prefix="fa-solid"]

O HTML puro:

1
<i class="fa-solid fa-download"></i>

Si tiene una cuenta Pro, cree un Kit en fontawesome.com, copie el Token de API y péguelo en los ajustes del plugin. Después de eso, el Selector de Iconos también mostrará los iconos Pro.

Método 2: instalación manual mediante functions.php

Este método es para quienes desean controlar cada recurso cargado en el sitio o evitar plugins adicionales. Funciona a través de un tema hijo para que la actualización del tema principal no borre sus cambios.

Crear un tema hijo

En la carpeta wp-content/themes/, cree un directorio con el sufijo -child (por ejemplo, astra-child). Dentro, cree dos archivos.

style.css:

1
/*
2
Theme Name: Astra Child
3
Template: astra
4
*/

functions.php:

1
<?php
2
add_action('wp_enqueue_scripts', 'enqueue_parent_styles');
3
function enqueue_parent_styles() {
4
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
5
}

Vaya a Apariencia → Temas y active el tema hijo.

Conectar Font Awesome mediante CDN

Añada este código al functions.php de su tema hijo:

1
add_action('wp_enqueue_scripts', 'enqueue_font_awesome');
2
function enqueue_font_awesome() {
3
    wp_enqueue_style(
4
        'font-awesome',
5
        'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css',
6
        array(),
7
        '6.7.2'
8
    );
9
}

Este gancho obtiene la versión gratuita desde el CDN de cdnjs, el CDN público más fiable para FA 6. El número 6.7.2 es la versión a junio de 2026; verifique la versión actual en la página del paquete en cdnjs y sustitúyala por la más reciente.

Alternativa: Kit de Font Awesome

El Kit proporciona acceso a los iconos Pro y carga automáticamente solo los estilos utilizados en la página, lo que se traduce en menos kilobytes innecesarios.

Regístrese en el sitio web de Font Awesome, cree un Kit, copie el código de inserción y péguelo en el header.php de su tema hijo antes de </head>:

1
<script src="https://kit.fontawesome.com/YOUR_CODE.js" crossorigin="anonymous"></script>

La desventaja del Kit es que el plan gratuito está limitado a 10 000 páginas vistas al mes. Para un sitio con mayor tráfico, use CDN o la versión Pro.

El editor de temas integrado (Apariencia → Editor de archivos del tema) le permite editar functions.php directamente desde el panel de administración. Sin embargo, es más seguro trabajar mediante FTP o el gestor de archivos del hosting: un error tipográfico en el código PHP rompe el sitio y, sin acceso a los archivos, no tendrá forma de restaurarlo.

Método 3: mediante Elementor u otro constructor de páginas

Si ya utiliza Elementor, no necesita un plugin aparte para Font Awesome; el constructor de páginas incluye la biblioteca de serie.

En cualquier widget que tenga un icono (Icono, Caja de icono, Lista de iconos), haga clic sobre el icono y se abrirá una biblioteca con búsqueda en todos los estilos gratuitos. El color, el tamaño, la sombra y los efectos al pasar el cursor se configuran en la barra lateral sin escribir una sola línea de CSS.

Lo mismo se aplica a SeedProd, Beaver Builder y Divi. Revise los ajustes de su constructor de páginas: casi todos los constructores visuales populares para WordPress ya incluyen Font Awesome en su núcleo.

Cómo cambiar los estilos de los iconos

Después de conectar Font Awesome, usted controla los iconos exclusivamente mediante clases y CSS. No es necesario editar directamente los archivos SVG.

Tamaño

El tamaño del icono se define usando clases predefinidas. Una clase lo hace un tercio más grande, otra lo duplica, una tercera lo triplica, y así sucesivamente hasta multiplicarlo por diez. Consulte los valores exactos de todas las clases en el sitio web de Font Awesome.

Ejemplo de un icono con el tamaño triplicado:

Ejemplo de un icono con el tamaño triplicado:

1
<i class="fa-solid fa-download fa-3x"></i>

Rotación y volteo

• fa-rotate-90, rotación de 90°
• fa-rotate-180, rotación de 180°
• fa-rotate-270, rotación de 270°
• fa-flip-horizontal, espejo horizontal
• fa-flip-vertical, espejo vertical

Animación

Dos opciones, ambas mediante clases:

• fa-spin, rotación suave (adecuada para indicadores de carga)
• fa-pulse, rotación en ocho pasos (efecto de pulsación)

1
<i class="fa-solid fa-spinner fa-spin"></i>

Color

El color del icono se hereda del texto padre. Para definir uno propio, utilice una regla CSS:

1
.fa-download {
2
    color: #27ae60;
3
}

La forma más sencilla de añadir este CSS es a través de Apariencia → Personalizar → CSS adicional. Los cambios se aplican de inmediato y son visibles en tiempo real.

Icono mediante pseudoelemento

Cuando un icono deba adjuntarse a un elemento sin añadir código HTML adicional, utilice ::before o ::after en CSS:

1
.external-link::after {
2
    content: "\f08e";
3
    font-family: "Font Awesome 6 Free";
4
    font-weight: 900;
5
    margin-left: 6px;
6
}

El código \f08e es el identificador Unicode del icono. Puede encontrarlo en la página del icono específico en fontawesome.com, donde aparece listado bajo el nombre.

Dónde conseguir iconos

Abra fontawesome.com/icons, escriba una palabra clave en la búsqueda y elija un estilo. En la página del icono encontrará el fragmento HTML, el código Unicode y la lista de estilos disponibles. Copie y pegue donde lo necesite.

Una nota sobre el videotutorial

Si prefiere ver en lugar de leer, aquí tiene un tutorial sobre cómo añadir iconos de Font Awesome a un menú de WordPress:

Después de verlo, vuelva al texto: a continuación se detallan matices que el video no cubre.

⁉️🤔 Preguntas frecuentes

¿Necesito pagar por Font Awesome?

La versión gratuita cubre las necesidades de la gran mayoría de los sitios: más de 2000 iconos en cinco estilos, incluyendo iconos de marcas (Facebook, Twitter, Instagram y cientos más). La versión Pro cuesta desde $60 al año y añade las familias Thin, Light, Sharp, Duotone en todos los estilos y la posibilidad de subir sus propios SVG. Pagar tiene sentido si usted vende iconos como parte de un producto o necesita específicamente duotonos. El plugin de Font Awesome en WordPress.org es completamente gratuito; los iconos Pro se conectan mediante un Token API en los ajustes del mismo plugin, sin necesidad de comprar ni instalar nada por separado.

¿Qué método de conexión debería elegir?

Para principiantes y sitios típicos, el plugin oficial. Se instala en dos clics, tiene búsqueda de iconos integrada en el editor y un escáner de conflictos. La instalación manual mediante CDN se justifica si usted está minimizando los plugins de su sitio y sabe exactamente en qué archivo añadir wp_enqueue_style. El Kit de Font Awesome es un punto intermedio: fácil de conectar sin plugin, pero con un límite gratuito de 10 000 visualizaciones.

¿Qué debo hacer si los iconos no se muestran?

Primero, ejecute el Escáner de Detección de Conflictos en los ajustes del plugin de Font Awesome. Lo más frecuente es que el tema u otro plugin esté cargando su propia versión de Font Awesome, lo que provoca un conflicto de versiones. El escáner encontrará la fuente del conflicto y el plugin le ofrecerá bloquearla. El segundo caso común es un error de sintaxis: compruebe que está usando el prefijo fa-solid y no fa (que es la sintaxis de la antigua versión cuatro).

¿Puedo usar Font Awesome sin WordPress?

Sí, Font Awesome no está vinculado a WordPress. Conecte el enlace CDN en el <head> de cualquier documento HTML e inserte los iconos con la etiqueta <i class="fa-solid fa-name"></i>. Funciona con React, Vue, Laravel, HTML plano e incluso generadores de PDF. En fontawesome.com/docs hay instrucciones para una docena de plataformas.

¿Por qué es Font Awesome mejor que otras bibliotecas de iconos?

Dos argumentos principales: el tamaño de la comunidad y la compatibilidad. Font Awesome lo usan millones de sitios, por lo que la documentación está traducida a una docena de idiomas y las respuestas a cualquier problema se encuentran en segundos mediante una búsqueda. Segundo, el plugin oficial para WordPress con resolución automática de conflictos: ni Material Icons ni Bootstrap Icons ofrecen esto.

¿Vale la pena el esfuerzo? Qué elegir según su tarea

Si ha leído hasta aquí, la siguiente tabla le ahorrará tiempo:

Compruebe que, tras la conexión, los iconos se muestran correctamente en diferentes navegadores y en dispositivos móviles. Si nota parpadeos o sustitución de iconos, ejecute el escáner de conflictos desde la sección «Solucionar problemas» en los ajustes del plugin. El problema casi siempre se resuelve con un solo botón.