Tutorial: Cómo Añadir Iconos al Menú del Encabezado en WordPress sin Plugins

Paso 1: Preparar los Iconos

Antes de comenzar, necesitas tener los iconos que deseas usar. Puedes obtener iconos de sitios como Font Awesome, Iconmonstr, o cualquier otro proveedor de iconos.

1. Descarga y Almacena los Iconos: Descarga los iconos que deseas usar y guárdalos en tu servidor o usa una CDN si los obtienes de Font Awesome.

Paso 2: Añadir el Código del Icono en el Menú de WordPress

1. Accede a la Administración de WordPress:

• Ve a tu panel de administración de WordPress.
• Navega a Apariencia > Menús.

1. Editar Ítems del Menú:

• Selecciona el menú al que deseas añadir iconos.
• Haz clic en el ítem del menú donde quieres añadir el icono para expandirlo.

1. Añadir Código HTML del Icono:

• Añade el código HTML del icono directamente en el nombre del ítem del menú. Por ejemplo, si usas Font Awesome, tu código podría ser algo así: <i class="fas fa-home"></i> Inicio.
• Asegúrate de que el campo de texto del nombre del ítem contenga tanto el icono como el texto del ítem.

<i class="fas fa-home"></i> Inicio

Paso 3: Añadir CSS Personalizado

Para asegurarte de que los iconos se vean correctamente y se alineen adecuadamente, necesitarás añadir algo de CSS personalizado.

1. Añadir CSS Personalizado:

• Ve a Apariencia > Personalizar.
• Selecciona CSS Adicional.

1. Insertar CSS:

• Añade el siguiente código CSS para estilizar tus iconos:

/* Estilo básico para los iconos */
#site-navigation .menu-item i {
    margin-right: 8px; /* Espacio entre el icono y el texto */
    font-size: 16px; /* Tamaño del icono */
    vertical-align: middle; /* Alinear verticalmente con el texto */
}

/* Ajuste para el tamaño del icono en dispositivos móviles */
@media (max-width: 768px) {
    #site-navigation .menu-item i {
        font-size: 14px;
    }
}

3. Publicar:

• Haz clic en Publicar para guardar los cambios.

Paso 4: Añadir los Scripts de Font Awesome (si es necesario)

Si estás usando iconos de Font Awesome, necesitas asegurarte de que los scripts de Font Awesome están incluidos en tu sitio.

1. Incluir Font Awesome:

• Ve a Apariencia > Editor de Temas (o Theme File Editor).
• En functions.php, añade el siguiente código para incluir Font Awesome:

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

Paso 5: Guardar y Probar

1. Guardar Cambios:

• Guarda todos los cambios que has realizado.

1. Probar el Menú:

• Ve a tu sitio web y verifica que los iconos aparecen correctamente en el menú del encabezado.
• Asegúrate de probar el menú en diferentes dispositivos y navegadores para asegurarte de que se ve bien en todas partes.

Conclusión

Añadir iconos al menú del encabezado de tu sitio web en WordPress sin usar plugins es un proceso relativamente sencillo que puede mejorar significativamente la apariencia y funcionalidad de tu sitio. Siguiendo estos pasos, puedes personalizar tu menú para que sea más atractivo visualmente y fácil de usar.

Si tienes alguna pregunta o necesitas más ayuda, no dudes en dejar un comentario o contactarnos. ¡Buena suerte con tu personalización de WordPress!