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
Cómo crear una caja de autor en Wordpress

Cómo crear una caja de autor en WordPress con y sin plugins

Share on facebook Facebook Share on linkedin LinkedIn Share on whatsapp WhatsApp Share on twitter Twitter En este tutorial te vamos a explicar 3 formas sobre cómo crear una caja de autor en WordPress. Los 2 plugins que vamos a utilizar para explicar cómo crear

Crear un child theme en Wordpress con plugins

Cómo crear un child theme en 3 minutos

Sí has llegado hasta aquí es porque posiblemente no sepas que és y para que sirve un child theme o tema hijo. Don´t worry, hoy te vamos a explicar cual es su función y cómo crear un child theme en 3 minutos. Índice de contenidos

Maquetar con Gutenberg Wordpress

Gutenberg, el nuevo editor de WordPress

Hoy vamos a hablar de Gutenberg, pero no del inventor de la imprenta con teclas móviles moderna, si no del nuevo editor de WordPress que va a cambiar completamente la forma en que publicamos contenido en nuestras páginas web.Gutenberg es el nombre del proyecto que

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í.

2 comentarios en “Cómo añadir iconos a tu menú de WordPress con y sin plugins”

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