Si estás intentado añadir iconos en tu menú principal de tu WordPress y no sabes cómo hacerlo, sigue leyendo este artículo porque te vamos explicar cómo añadir iconos a tu menú de WordPress con y sin plugins.
Índice de contenidos
Insertar iconos al menú con plugins
Para llevar a cabo esta labor vamos a hacer uso del plugin WP Menu Icons, que lo podréis encontrar completamente gratuito en el repositorio de WordPress. Independientemente de que es un plugin muy fácil de usar lo que le da un valor añadido a este plugin es que podemos hacer uso de varias bibliotecas de iconos:
- Dashicons
- Elegant Icons
- Elusive Icons
- FontAwsome Icons
- Foundation Icons
- Themify Icons
Una vez instalado y activado nos dirigiremos a apariencia/menú. Desde la columna de añadir elementos al menú seleccionaremos con que biblioteca de iconos queremos trabajar (recuadro rojo de la imagen). Para insertar los iconos en cada uno de los elementos que forman parte de nuestro menú simplemente deberemos clicar sobre el símbolo «+» (recuadro verde de la imagen) y se nos abrirá una ventana emergente.
Desde esta ventana, a parte de seleccionar el icono nos ofrece algunas opciones de personalización:
- Ocultar el título de la etiqueta label
- Insertar el icono antes o después de la etiqueta label
- Alineamiento del icono
- Tamaño del icono
- Color del icono
Guardamos los ajustes del icono, guardamos los ajustes del menú y ya tenemos nuestro menú personalizado con iconos. Esta opción es totalmente compatible si diseñas tu web con un menú vertical.
Insertar iconos al menú sin plugins
Para insertar los iconos en el menú si el uso de ningún plugin deberemos hacer 2 cosas, crear una conexión FTP con nuestro servidor y crear un child theme. Para el child theme en el repositorio de WordPress podréis encontrar varios plugins como por ejemplo Child Theme Generator, Child Theme Wizard, WP Child Theme Generator o Child Theme Configurator.
En esta entrada te explicamos que es un child theme y todos los pasos para crearlo con Child theme configurator.
Una vez creado y activado el child theme podemos desinstalar el plugin.
El siguiente paso será crearnos un kit de trabajo en Font Awesome. Tras verificar el correo y finalizar el proceso de registro os llegará un email para acceder a vuestro kit. Algo similar a la siguiente imagen.
Tener presente el script señalado porque posteriormente lo necesitaremos.
Ya para finalizar buscaremos los iconos que necesitemos en la galería de Font Awesome, copiaremos las etiquetas (recuadro rojo de la imagen) y las pegaremos en las etiquetas de navegación de cada uno de los elementos de nuestro menú (recuadro verde de la imagen). Y ya tenemos puestos los iconos en el menú sin plugins.
Repasamos todo lo explicado en el siguiente video.
Genial , muchas gracias, lo hice en la web de un cliente al que recientemente me contrató hosting en Perú hosting.org.pe y quedó excelente.
Hola Edgar, gracias por tu comentario. Nos alegra saber que te sirvió de utilidad nuestra entrada.
Un saludo.
gracias lo estoy usando en dogshort.com con wordpress multisite
Gracias por la info. Un saludo.