Como añadir iconos a tu menu Wordpress con y sin plugins

Cómo añadir iconos a tu menú de WordPress con y sin plugins

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
wp menu 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.

Añadir icons al menú WordPress con wp icons menu

Desde esta ventana, a parte de seleccionar el icono nos ofrece algunas opciones de personalización:

  1. Ocultar el título de la etiqueta label
  2. Insertar el icono antes o después de la etiqueta label
  3. Alineamiento del icono
  4. Tamaño del icono
  5. 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.

Añadir font awesome a tu WordPress
Mediante una conexión FTP duplica el archivo header.php de tu tema en el child theme. Si no sabes como crear una conexión FTP aquí te lo explicamos.Edita el archivo header.php de tu child theme y añade el script del kit de Font Awesome entre las etiquetas head  y guarda los cambios.

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.

i class
i class 2

Repasamos todo lo explicado en el siguiente video.

Compártenos en tu red social favorita
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on whatsapp
Como crear una web para inmobiliaria con wordpress

Cómo crear una web para inmobiliarias con WordPress

Si estas buscando cómo crear una web para inmobiliarias con WordPress en este post te vamos a explicar como llevarlo a cabo con el plugin Estatik. ¿Por qué con un plugin cuando hay plantillas diseñadas especialmente para esta función? Pues por tres motivos: 1º- Por

Como crear el aviso de politicas de cookies con Elementor

Cómo crear el aviso de políticas de cookies con Elementor

Si bien es cierto que existen varios plugins que con unos pocos ajustes te permiten que en tu web se visualice el aviso del uso de cookies y sus políticas, también es muy recomendable trabajar en tu WordPress con los plugins esenciales. Una forma facíl

Mejorar imágenes para Wordpress

Cómo optimizar imágenes para tu página web

Un elemento que da mucho valor a nuestras paginas o entradas de blog son las imágenes. Hacer uso de una buena imagen en nuestras publicaciones incorpora un número de características que le añaden un valor añadido: Mejoran el SEO: Mediante el uso de las etiquetas

Suscríbete a nuestro blog

Responsable:Carlos Jiménez Mendez
Finalidad:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
Legitimación:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
Destinatarios:No se ceden datos a terceros, salvo obligación legal.
Personas físicas o jurídicas directamente relacionadas con el Responsable
Encargados de Tratamiento adheridos al Privacy Shield
Derechos:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
Información adicional:Se puede consultar la política de privacidad de forma más detallada aquí.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leido y acepto nuestra política de privacidad. *

Responsable:Carlos Jiménez Mendez
Finalidad:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
Legitimación:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
Destinatarios:No se ceden datos a terceros, salvo obligación legal.
Personas físicas o jurídicas directamente relacionadas con el Responsable
Encargados de Tratamiento adheridos al Privacy Shield
Derechos:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
Información adicional:Se puede consultar la política de privacidad de forma más detallada aquí.
Ir arriba