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 un botón para descargar archivos con Elementor

Cómo crear un botón para descargar archivos con Elementor

No es tan raro que se te presente la necesidad de ofrecer la posibilidad de adjuntar un archivo descargable a un botón. Un PDF, un MP3, un archivo Word. En este tutorial te vamos a explicar cómo crear un botón para descargar archivos con Elementor.

booster for woocommerce

Booster for Woocommerce, el jetpack para tu tienda online

Con más de 50.000 instalaciones activas, Booster for Woocommerce se presenta como uno de los paquetes más completos para añadir funciones a tu tienda online. Booster for Woocommerce es un plugin freemium que podrás encontrar en el repositorio oficial de WordPress y ofrece la posibilidad

Contador de visitas para tu Wordpress y sin plugins

Contador de visitas para WordPress y sin plugins

Hoy volvemos con un tutorial que nos han pedido varios suscriptores de nuestro canal de You Tube, cómo añadir un contador de visitas a WordPress, y desde byteweb, como somos partidarios de trabajar con el mínimo número de plugins vamos a explicarlo trabajando con una

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