Cómo agregar y personalizar menús con Font Awesome en Divi y WordPress

Los menús de navegación son el mapa principal de cualquier sitio web. Incluir iconos visuales junto al texto no solo mejora la estética general, sino que optimiza la experiencia de usuario (UX) al facilitar la lectura rápida y el reconocimiento de secciones clave.

En esta guía paso a paso aprenderás a integrar la librería de iconos Font Awesome en los menús de navegación de WordPress y Divi, utilizando tanto la etiqueta <i class="..."> directa como las Clases CSS de WordPress.

Métodos para conectar Font Awesome con WordPress y Divi

Antes de agregar iconos a las opciones de tu menú, debes asegurarte de que la librería Font Awesome esté cargada en tu tema. Existen dos formas sencillas de lograrlo sin recargar tu sitio web:

Opción A: Mediante el Kit oficial de Font Awesome o CDN

Puedes vincular la versión gratuita de Font Awesome agregando una línea de código en el archivo functions.php de tu tema hijo (Child Theme) o mediante un plugin de inserción de cabeceras como Header and Footer Scripts.

Añade este fragmento en el archivo functions.php:

PHP

// Cargar Font Awesome CDN en la cabecera del sitio
function cargar_fontawesome_en_divi() {
    wp_enqueue_style(
        'font-awesome-cdn', 
        'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css', 
        array(), 
        '6.5.1'
    );
}
add_action('wp_enqueue_scripts', 'cargar_fontawesome_en_divi');

Explicación del código:

• wp_enqueue_style(): Registra y carga la hoja de estilos externa de forma optimizada.
• 'font-awesome-cdn': Nombre único (handle) asignado a la hoja de estilos.
• [https://cdnjs.cloudflare.com/](https://cdnjs.cloudflare.com/)...: Enlace directo a la librería CSS comprimida alojada en la red CDN.
• add_action('wp_enqueue_scripts', ...): Ejecuta la función durante la carga de scripts del lado del cliente.

Paso a paso: Agregar iconos a tu menú de navegación

Una vez enlazada la biblioteca, sigue estos pasos para insertar los iconos en los enlaces de tu menú.

Paso 1: Activar las Clases CSS en WordPress

1. Dirígete a tu panel de control de WordPress y ve a Apariencia > Menús.
2. En la parte superior derecha de la pantalla, haz clic en el desplegable Opciones de pantalla.
3. Marca la casilla Clases CSS. Esto habilitará un nuevo campo dentro de cada elemento del menú.

Paso 2: Buscar la clase del icono

1. Accede al sitio oficial de Font Awesome ([fontawesome.com/search](https://fontawesome.com/search)).
2. Busca el icono que necesitas (por ejemplo, fa-house para inicio, fa-envelope para contacto o fa-user para perfil).
3. Copia el prefijo de familia y el nombre de la clase, por ejemplo: fa-solid fa-house o fa-brands fa-whatsapp.

Paso 3: Asignar la clase al menú

1. Despliega el ítem de menú al que deseas agregar el icono en Apariencia > Menús.
2. En la casilla Clases CSS (opcional), pega las clases correspondientes (ejemplo: fa-solid fa-house).
3. Alternativamente, si prefieres colocar el icono directamente en el texto, puedes escribir la etiqueta HTML dentro del campo Etiqueta de navegación:

HTML

<i class="fa-solid fa-house"></i> Inicio

1. Haz clic en Guardar menú.

Estilizando los iconos de menú con CSS en Divi

Para ajustar el tamaño, margen y color de los iconos respecto al texto del menú, añade las siguientes reglas en Divi > Opciones del Tema > Custom CSS o en tu hoja de estilos principal:

CSS

/* Espaciado entre el icono y el texto del menú */
.et_pb_menu .nav li a i,
#top-menu li a i {
    margin-right: 8px;
    font-size: 16px;
    transition: color 0.3s ease;
}

/* Cambiar el color del icono al pasar el cursor (Hover) */
.et_pb_menu .nav li a:hover i,
#top-menu li a:hover i {
    color: #0073aa;
}

Explicación del código CSS:

• #top-menu li a i y .et_pb_menu .nav li a i: Seleccionan las etiquetas <i> dentro de los menús nativos de Divi y del módulo Menú del Divi Builder.
• margin-right: 8px;: Añade una separación adecuada entre el icono y el texto contiguo.
• transition: color 0.3s ease;: Aplica un efecto suavizado al cambiar de color durante el evento hover.

Conclusión

Incorporar iconos de Font Awesome a los menús de tu sitio WordPress con Divi es una técnica sencilla que mejora la navegación visual y eleva el aspecto profesional del sitio. Aplicando código limpio mediante las funciones nativas del gestor o CSS personalizado, mantendrás una estructura liviana y fácil de administrar. ¡Aplica este tutorial en tus proyectos y dale un toque distintivo a tu cabecera!