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

4 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í.
Scroll al inicio
Logo diseño paginas web Vilafranca del Penedes
Resumen de privacidad

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.