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
Que son los estilos del tema de elementor pro

Qué son los estilos del tema de Elementor

Antes de iniciar cualquier proyecto, una parte muy importante del proceso de trabajo para crear cualquier sitio web con WordPress y Elementor es personalizar los elementos que engloban el contenido de tu página web. Para facilitarte esta tarea los chicos de Elementor han añadido la

Como crear una web para inmobiliaria con wordpress

Cómo crear una web para inmobiliarias con WordPress

Share on facebook Facebook Share on linkedin LinkedIn Share on whatsapp WhatsApp Share on twitter Twitter 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

Como añadir reseñas de Google a tu Wordpress

Cómo añadir las reseñas de Google a WordPress

Seguro que como internauta un factor que te hace decidirte por comprar un producto o un servicio de una empresa son las reseñas. En el post de hoy vamos a facilitarte esa tarea explicando cómo añadir las reseñas de Google a tu WordPress. Para llevar

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