Kevin77
Beta
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola,en principio la imagen que adjuntas parece más un icono que una imagen, pero para responder tu pregunta específicamente para subir una imagen al menú de navegación una vez hayas subido la imagen a tu wordpress solo debes ir a la opción de enlaces personalizados,
en el campo de url pones la dirección a donde quieres apuntar como normalmente lo harías
ahora, para subr la imagen al menú
si quieres la pura imagen: en el campo "texto del enlace" pones lo siguiente: <img src="url de la imagen">
si quieres la imagen con texto: <img src="url de la imagen"> texto visible
<i class="fa fa-camera-retro"></i>.main-navigation li a {
display:flex;
align-items: center;
}
.main-navigation li .icono-1 {
background-image: url(/svg/icono.svg); // Aqui va el nombre de la carpeta y archivo que este dentro de la raiz de tu tema
background-repeat: none;
background-position: center;
margin-right: 8px;
}<span class="icono-1"></span>HOMEsi lo puedes hacer con el texto que te di para no meter plugins ya que los que ponen directamente un icono (svg) suelen cargar mucho la página,Hola,
Sí, tienes razón, es un icono, perdón por el error, he seguido investigando y he encontrado un plugin "WP menu icons" que mete el icono en el menú.
Si quiero hacerlo sin plugin podría hacerlo como tu me dices? sería aquí en la foto que te remito? no he visto nada de texto del enlace
Ver el archivo adjunto 586120
Por otro lado he estado pensando, ¿si lo retoco directamente en el header.php? me cargo la página o funcionaría hacer el cambio con html puro. Me da miedo probar no lo voy a negar.
Gracias
Lo de la imagen es buena opcion hasta que hablamos de responsive, porque al ser un img es un bloque por eso prefiero usar span que son inline y mucho mas faciles de manejar a la hora de hacer diseños responsivos, anque el img ambien es una opcionsi lo puedes hacer con el texto que te di para no meter plugins ya que los que ponen directamente un icono (svg) suelen cargar mucho la página,
yo (loco obsesionado por la velocidad de carga) prefiero irme a un banco de iconos y descargarlo en png, le das 20x20px de tamaño y sigues las instrucciones que te di anteriormente
igualmente ya te dieron opciones con css
Nota: no vez lo de texto del enlace porque no estás en "enlaces personalizados"
buen punto, aunque podría solucionarse asignando un menú para escritorio y otro para móvil, dándole a cada uno los pixeles correctos a las imágenes en función del dispositivo en el que se mostraránLo de la imagen es buena opcion hasta que hablamos de responsive, porque al ser un img es un bloque por eso prefiero usar span que son inline y mucho mas faciles de manejar a la hora de hacer diseños responsivos, anque el img ambien es una opcion
Yes, pero mientras menos codigo mejor. Pero ambas soluciones dan el mismo resultado ya queda de parte del usuario cual usarbuen punto, aunque podría solucionarse asignando un menú para escritorio y otro para móvil, dándole a cada uno los pixeles correctos a las imágenes en función del dispositivo en el que se mostrarán
totalmente de acuerdo, con base en lo dicho, para mi la mejor solución es no usar imágenes en el menú, especialmente hablando de móvilmientras menos codigo mejor
Gracias por el intercambio de opiniones, la verdad ha estado interesante y me ha dado que pensar en lo referente a como hacerlo.
En lo referente a como me afecta a mí y a mi proyecto os comento, de primeras me equivoqué poniendo la palabra imagen cuando quería decir icono y aunque yo pensaba más en una imagen tenéis razón, lo que debo de insertar es un icono.
Insertaré font-awesome y le pondré un icono, aunque con el hilo que habéis comentado eso no quita que en alguna ocasión llegue alguien con una imagen en particular ya que no haya icono y no sepa utilizar illustrator(como es mi caso), por lo cual me decantaría en dos opciones:
- Hacerla responsive, creo que es lo más adecuado.
- Ponerle un tamaño a la imagen que se vea igual en pc y en móvil, de igual tamaño, para que se vea del mismo tamaño en ambos dispositivos (aunque en el modelo que tengo de página utiliza un icono diría que es del mismo tamaño en pc y móvil)
No es que sirva de mucho esto que digo pero ya que os habéis molestado en orientarme me parece de recibo comentar lo que haré, no se si os interesará pero es para agradeceros los comentarios.
Saludos y muchas gracias compañeros.
Flat icon es una buena alternativa para encontrar iconos variados en caso tal que no encuentres lo que necesitas en fontawesome, pero bueno el icono si deberia tener el mismo tamaño tanto en desk como en movil.
En caso tal de que necesites alguna ayuda hazlo saber y te podemos orientar
Flat icon es una buena alternativa para encontrar iconos variados en caso tal que no encuentres lo que necesitas en fontawesome, pero bueno el icono si deberia tener el mismo tamaño tanto en desk como en movil.
En caso tal de que necesites alguna ayuda hazlo saber y te podemos orientar
Lo miraré, estoy mas acostumbrado a font awes.. por eso dije de utilizarlo, flaticon también parece buena opción,Comparto. En FlatIcon se puede descargar hasta los mismos iconos de FA y cualquier otro disponible en su plataforma en formato SVG, así no es necesario el uso de Illustrator.
Ya queda de tu parte cual utilizar, la unica diferencia de flaticon es que tendrias que hacer el tema de css como te lo he comentado más arribaLo miraré, estoy mas acostumbrado a font awes.. por eso dije de utilizarlo, flaticon también parece buena opción,
Utilizamos cookies y tecnologías similares para los siguientes fines:
¿Aceptas las cookies y estas tecnologías?
Utilizamos cookies y tecnologías similares para los siguientes fines:
¿Aceptas las cookies y estas tecnologías?