Tutorial para agregar iconos al Menu de WordPress

ForoFreelance Foros Programación Freelance Tutorial para agregar iconos al Menu de WordPress

  • Autor
    Posts
  • #8452

    Javier
    Administrador
    @javi

    Record +161

    La personalización de una Plantilla Wordpress es algo importante respecto al diseño y muy común, por eso en este artículo vamos a ver cómo agregar imágenes tipo iconos al menu WordPress de manera fácil y paso a paso utilizando código CSS.

    ¿Cómo Agregar iconos al menu WordPress?

    1) Vamos a –> Apariencia –> Menús y Seleccionamos “Opciones de Pantalla” y Marcamos la Opción “Clases CSS”

    Iconos en Menu WordPress
    2) Abrimos el Menú al que queremos añadir un icono y le damos un nombre a su clase css utilizando el campo “Clases CSS (opcional)“, y luego le damos Guardar Menú.

    En este ejemplo asignamos el nombre “iconomenu” a nuestro menu llamado “Guía sobre Dominios Web”.

    Icono WordPress Menu
    3) Vamos a –> Medios –> “Añadir Nuevo” (Para subir nuestro icono a la web)

    Subimos a nuestro sitio web el icono que queremos utilizar en el Menú. En nuestro caso el icono tiene un tamaño de 24px por 24px en formato PNG.

    Iconos Menu WordPress

    4) Vamos a –> Apariencia –> Editor y en nuestra hoja de estilo (style.css) pegamos el siguiente código:

    En background-image: url(‘la-url-de-tu-imagen’) debes poner el link de tu icono.

    .iconomenu{
    background-image: url('https://www.comprar-dominio.com/mundo.png');
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 15px;
    }

    Icono Menu WordPress

    • Para empezar, si pegas el código en el archivo style.css y actualizas tu Plantilla (Tema) como consecuencia perderás los cambios, por lo tanto tendrás que volver añadir el código del punto 4.
    • Sin embargo, si estas utilizando un plugin de “CCS Personalizado” puedes pegar el código ahí. (De esta manera, si actualizas tu tema no perderás los cambios. Recomendable)
    • También puedes pegar el código en el campo “CSS Adicional” que aparece en el menú: Apariencia –> Personalizar –> “Css Adicional”. (De esta manera, si actualizas tu tema no perderás los cambios. Recomendable)

    5) Das clic en “Actualizar el Archivo”.
    6) Limpia el cache, el historial del navegador y vuelve a recargar tu sitio web.
    7) Magia! El Icono aparecerá en el menu… de esta manera hemos agregado un icono al Menu Principal de WordPress.

    Icono en el Menu Principal wordpress

    Para asignar iconos a otros menús solo debes repetir el mismo proceso. Pero recuerda asignar un nombre diferente de clase a cada menú (Paso 2) y luego reemplaza la url del icono por la del nuevo icono (Paso 4).

    Este tutorial fue gracias a la ayuda de Comprar Dominio . Si te gusto o tienes dudas déjame un comentario 😉

Viendo 1 publicación (de un total de 1)

Debes estar registrado para responder a este debate. Entrar & Registro