Si alguna vez ha visto un sitio web y se ha preguntado cómo crearon los íconos de menú, está en el lugar correcto. Los íconos de menú de WordPress agregan un elemento visual a su sitio e incorporan íconos relevantes para guiar a sus usuarios a las páginas a las que deben ir.
En resumen, un ícono de menú es una forma simple y no invasiva de hacer que su sitio web se vea más profesional , al tiempo que proporciona sutilmente un empujón adicional a sus usuarios al indicar exactamente lo que pueden esperar cuando hacen clic en una pestaña de menú.
Además, agregar íconos de menú de WordPress solo toma unos pocos pasos con el complemento correcto. No es necesario que cree un código personalizado para el diseño del menú ni se preocupe por configuraciones complicadas.
Siga leyendo para obtener información sobre cómo agregar esos íconos de menú de WordPress y encontrar las imágenes perfectas para su industria y negocio.
![📚]()
- Cómo agregar íconos de menú de WordPress a sus botones de navegación
- Configure los ajustes del icono del menú
- Solución de problemas
- Cómo activar todos los paquetes de iconos compatibles en el complemento
- Cómo agregar archivos adjuntos de imagen y archivos adjuntos SVG
Cómo agregar íconos de menú de WordPress a sus botones de navegación
Para agregar fácilmente íconos de menú de WordPress, puede usar el complemento gratuito de íconos de menú de Themeisle . Es, con mucho, el complemento más fácil para lograr el resultado deseado, y recibe una impresionante variedad de conjuntos de iconos para elegir, incluidas opciones de Font Awesome, Fontello y Genericons.
A continuación, le mostraremos cómo configurar el complemento.
Cómo agregar rápidamente su primer ícono de menú
Veremos más íconos específicos de la industria más adelante en el artículo, pero ahora es el momento de agregar íconos instantáneos a algunas pestañas en su menú.
Nota: Suponemos que ya tiene configurado un menú de WordPress. Si ese no es el caso, vaya a este artículo (o este para menús desplegables de varios niveles ) para aprender cómo configurar su menú de WordPress.
La documentación del complemento de Themeisle proporciona una guía rápida sobre cómo agregar íconos de menú si está interesado. También lo cubriremos aquí con un poco más de profundidad.
Para empezar, ve al panel de control de WordPress y haz clic en Apariencia → Menús .
Suponiendo que ya tiene un menú, debería poder ver los elementos del menú debajo del encabezado Estructura del menú. Con varios menús, deberá seleccionar el que desea editar. También hay un módulo a la izquierda llamado Agregar elementos de menú, que le permite crear pestañas de menú a partir de páginas, publicaciones, enlaces personalizados y más.
Encuentre el menú correcto y agregue un ícono
Para agregar iconos de menú de WordPress, seleccione cualquiera de los elementos de menú que ya ha creado.
Ubique el ícono: Seleccionar enlace. Haga clic en eso para navegar a la sección para agregar un ícono a ese elemento de menú en particular.
De forma predeterminada, el complemento Menu Icons by Themeisle revela opciones de iconos de la colección Dashicons. Siéntase libre de desplazarse por la lista y elegir un icono que coincida con el título del menú real.
Por ejemplo, el ícono del Personalizador (bolígrafo/pluma) sería relevante como ícono de menú para un Blog.
También puede buscar íconos por palabra clave o usar el filtro de categoría para encontrar diferentes tipos de íconos.
Configure los ajustes del icono del menú
Haga clic en el icono que desea utilizar para el elemento del menú. Esto resalta el icono y coloca una marca de verificación junto a él.
En el lado derecho, verá varios ajustes para configurar antes de activar el icono.
Éstos incluyen:
- Ocultar etiqueta : elimina la etiqueta de texto y solo conserva el ícono (ideal para íconos de redes sociales).
- Posición : cambia la ubicación del icono en relación con el texto.
- Alineación vertical : mueve la ubicación vertical del icono.
- Tamaño de fuente : amplía o reduce el tamaño del icono.
Hay un área de vista previa que proporciona un ejemplo de cómo se ve el elemento del menú a medida que ajusta la configuración. Por ejemplo, aumentar el tamaño de fuente y mover la posición del ícono a «Después» da como resultado una nueva vista previa.
Asegúrese de que el ícono que desea aún esté resaltado, luego haga clic en el botón Seleccionar para agregarlo a su menú.
Asegúrese de hacer clic en Guardar menú para que se activen los iconos.
Si desea cambiar algo, siempre puede seleccionar el enlace Eliminar para comenzar de nuevo.
Ver el nuevo ícono en su menú frontal
Verifique si el ícono realmente aparece en su sitio.
Ver el sitio web en vivo le permite ver si se ve presentable o si es necesario ajustar más la configuración del ícono.
Solución de problemas
Si no puede ver el ícono o algunos de los elementos de su menú, asegúrese de que la configuración del menú esté configurada correctamente. La parte más importante es tener asignada la ubicación de visualización para ese menú, como asignarla a la ubicación del menú principal.
También es esencial verificar la pestaña Administrar ubicaciones en la sección Menús, ya que es posible que el menú incorrecto esté asignado al menú principal.
Cómo activar todos los paquetes de iconos compatibles en el complemento
El complemento Menu Icons by Themeisle viene con soporte para los siguientes paquetes de íconos:
- Dashicons
- Elusivo
- fuente impresionante
- Base
- genéricos
- Imágenes
- SVG
De forma predeterminada, la configuración del complemento solo muestra Dashicons, pero puede activar conjuntos de iconos adicionales si lo desea. Sin embargo, debe intentar limitar la cantidad de conjuntos de iconos que carga porque cada conjunto de iconos adicional tendrá un pequeño efecto en el rendimiento de su sitio.
Para activar todos o algunos de los tipos de íconos, vaya a Apariencia → Menús en el tablero.
Elija la pestaña Configuración de iconos de menú .
Activar todas las colecciones/fuentes de iconos de menú
Verá varios tipos de iconos en la pestaña Global :
Marque los conjuntos de iconos que desea agregar como opciones.
Haga clic en el botón Guardar configuración para continuar.
Decida un elemento de menú para el que le gustaría agregar un nuevo ícono.
Haga clic en el botón Seleccionar para ese elemento.
Explora los íconos de otras fuentes
Ahora debería ver una lista de varias categorías de iconos en el lado izquierdo de la ventana.
Nota: Si no ve las nuevas categorías de íconos, intente actualizar su página o guardar su menú.
Ahora, si escribe «Tienda» en el campo de búsqueda, verá algunos íconos diferentes de cada colección de íconos.
Por ejemplo, la colección de la Fundación proporciona dos íconos para esa búsqueda, uno que es una bolsa de compras y otro que es un carrito de compras.
Con exactamente el mismo término de búsqueda, Font Awesome ofrece tres íconos más, todos un poco diferentes de la colección Foundation.
Al igual que el tutorial de arriba, elija un icono y haga clic en Seleccionar para agregarlo a su menú.
Recuerde presionar el botón Guardar Menú.
Ahora el menú tiene tanto el ícono del Blog de antes como el ícono de la Tienda, pero esta vez desde una fuente de ícono diferente.
Cómo agregar archivos adjuntos de imagen y archivos adjuntos SVG
El complemento también permite la carga de archivos SVG (vector) y de imagen.
Esto significa que puede crear su propia imagen o icono de vector y cargarlo, o puede encontrar un icono de imagen genial en otro lugar en línea.
Nuevamente, vaya a Apariencia → Menús , luego haga clic en el enlace Seleccionar para el elemento de menú de su elección.
Una cosa que es diferente acerca de los archivos SVG y de imagen es que normalmente necesita hacerlos del tamaño perfecto antes de cargarlos en WordPress; de lo contrario, la imagen puede ser demasiado grande o pequeña, alterando el diseño del menú.
Para continuar, cargue una imagen muy pequeña (esto depende de su tema, pero 50 × 50 px es un buen punto de partida), resalte esa imagen y haga clic en Seleccionar.
Debería ver el icono de la imagen en la parte trasera del menú.
Y aparece junto a los íconos anteriores, excepto como una imagen mucho más única.
Comience a usar los íconos del menú de WordPress hoy
Los beneficios son abundantes cuando se trata de iconos de menú de WordPress.
No solo animan su sitio web, sino que añaden un elemento adicional de facilidad de uso a la navegación.
Afortunadamente, el complemento Menu Icons by Themeisle facilita la implementación de íconos, imágenes e íconos SVG, todo con unos pocos clics.
Para conocer otras formas de mejorar sus menús de WordPress, consulte estas guías:
- Cómo crear un mega menú de WordPress
- Los mejores complementos de menú para WordPress
- Cómo crear menús personalizados en WordPress
Si tiene preguntas sobre los íconos del menú de WordPress, háganoslo saber en los comentarios.
