Avisos
Vaciar todo

Poner en el SUBMIT un icono y no texto.  

 
Jordi
 Jordi
Usuario experto

Buenas noches a tod@s,

Tengo una página web que estoy retocando antes de lanzarla al público y tengo que sustituir los "SUBMITS" de formularios y en este caso el botón de busqueda de viviendas como adjunto en la captura de pantalla.... la quiero sutituir por un icono pero no se como hacer-lo....

Alguna ayuda?

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 21/02/2018 11:04 pm
Johnny Heredia Montiel
 Johnny Heredia Montiel
Miembro Moderator

Hola,

Tendrías que ubicar primero en que fichero se encuentra dicho botón. De ahí, lo más sencillo para modificar el texto por un icono es reemplazarlo por Icomoon: https://fontawesome.com/icons?d=gallery

ResponderCitar
Respondido : 22/02/2018 12:43 am

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Jordi
 Jordi
Usuario experto

Primero gracias por contestar....está claro que primero tengo que tener el fichero del icono..eso ya lo se...

Por ejemplo en la URL esblaiucom/lupa.png... pero como lo pones en la página que he puesto de ejemplo?

Que codigo css tendria que poner?

ResponderCitar
Respondido : 22/02/2018 3:43 am
Johnny Heredia Montiel
 Johnny Heredia Montiel
Miembro Moderator

Hola,

Puedes verificar por ejemplo si el siguiente enlace te es de ayuda: https://forum.freecodecamp.org/t/solved-adding-font-awesome-icons-to-an-input-button/74139/7

ResponderCitar
Respondido : 22/02/2018 4:42 am

Cursos Gratuitos WordPress

Jordi
 Jordi
Usuario experto

No me puedes decir que debo poner como haceis otras veces en todas las preguntas?

Que código en mi página poner?

Ya he leido mucho y no me sirve de nada si me days ejemplos solo...

Aguien más me puede ayudar...

ResponderCitar
Respondido : 22/02/2018 7:55 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Jordi.

No conocemos tu web y te podemos informar pero solo con lo que vemos en el navegador, por lo que es orientativo.

.- Edita el archivo style.css que encontrarás en la carpeta de tu plantilla themes -> tu plantilla y añade lo siguiente:

#advanced_search input[type="submit"] {
    font-family: FontAwesome;
} 

.- en la misma carpeta tienes que tener un archivo con el nombre " template-advanced-search.php ", editalo y busca lo siguiente:


Modificarlo por lo siguiente:


Revisa si con esto consigues el resultado que deseas y nos comentas.

Recuerda realizar una copia del archivo antes de realizar la modificación para tener una copia del original.

Un saludo

ResponderCitar
Respondido : 22/02/2018 10:16 am

Jordi
 Jordi
Usuario experto

Muchas gracias como siempre Pepe...lo hago en breve y te lo comento.....

ResponderCitar
Respondido : 22/02/2018 10:41 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Jordi.

ok, dejo el hilo en espera por si tienes que retomarlo.

Un saludo

ResponderCitar
Respondido : 22/02/2018 10:58 am

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Jordi
 Jordi
Usuario experto

Hola Pepe, retomando esto, he hecho lo que me has cmentado...pero la verdad.... se ve muy feo...

¿ No podria poner un ICONO (Imagen subida) ?

ResponderCitar
Respondido : 27/02/2018 6:07 pm
Jordi
 Jordi
Usuario experto

¿Se puede augmentar el tamaño de la lupa?

ResponderCitar
Respondido : 27/02/2018 6:41 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Podrías probar con un emoji, que es una imagen unicode, por ejemplo prueba con el siguiente código:


En lugar del caracter value: ? copia y pega la imagen de búsqueda desde:
https://emojifinder.com/search

Si quieres aprender más sobre emojis, revisa: https://decodecms.com/emojis-en-wordpress-con-unicode/

Saludos.

ResponderCitar
Respondido : 27/02/2018 6:42 pm
Jordi
 Jordi
Usuario experto

Gracias.... si eso ya lo vi...pero el cliete quiere sus colores i el Emoji de la lupa no puedo modifcar el color que quiere el cliente...por eso quiero poner una imagen mia creada con Photshop.... no se si como imagen de fondo se podria......

ResponderCitar
Respondido : 27/02/2018 6:49 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Si que se podría, revisa por ejemplo:
https://stackoverflow.com/questions/2444894/how-to-set-background-image-in-submit-button

Tienes que agregar el fondo por CSS

Saludos.

ResponderCitar
Respondido : 27/02/2018 8:01 pm