Reemplaza el botón de búsqueda con un ícono fa

Un usuario preguntó 👇

Hola, me pregunto si alguien puede ayudar por favor.

Quiero el botón para ingresar solicitud de búsqueda para usar el icono fa. He intentado varias cosas, incluida la SEC:

aportación en forma de investigación[type=”submit”] {asunto: » f179″; pantalla: bloque en línea; -webkit-font-smoothing: antialiased; / * fuente: normal 30px / 1 ‘dashicons’; * / alineación vertical: centro; fondo: ninguno; límite: ninguno; padding-left: 20px; familia de fuentes: FontAwesome; ancho: 60px; }

Esto cambia el fondo y el texto, pero no muestra el icono. Me pregunto si Quark maneja los nombres de manera diferente con mi referencia CSS ‘asunto: » f179 ″;’ ?

Veo en la documentación de Quark que se pueden agregar iconos a las etiquetas , no creo que pueda usar esto en este caso. Pensé en crear un nuevo formulario copiando en mi archivo de funciones ‘el código get_search_form ()’ desde el sitio de referencia de código de wordpress y luego renombrarlo y llamarlo. Pero no estoy seguro de qué cambiar, estaba buscando en un filtro para cambiar el ícono, pero me quedé atascado.

Me referí a:

(@ahortin)

Hace 3 años, 1 mes

Si desea hacer un campo de búsqueda que usa un ícono de fuente impresionante para el botón, haga lo siguiente:

Crear un searchform.php archiva el tema de tu hijo con lo siguiente …

<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ) ?>">
	<label>
		<span class="screen-reader-text"><?php _x( 'Search for:', 'label' )?></span>
		<input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" />
	</label>
	<button type="submit" class="search-submit"><i class="fa fa-search"></i></button>
</form>

Y agregue el siguiente estilo a su hoja de estilo …

.search-form .search-submit {
	background-color: inherit;
	border: none;
}

(@ woody2016)

Hace 3 años, 1 mes

Hola Anthony,

Muchas gracias por tomarse el tiempo para desarrollar el código, funciona como un regalo, previamente había creado una imagen y la usé sobre el botón de búsqueda original con CSS para hacer transparentes los elementos básicos del botón. ¡pero esta versión de formulario es ideal! Puedo ver que el método de reemplazo del ícono del botón será útil para otras cosas que tengo en mente.

Veo que has incluido el eco del lector de pantalla, que es de mucha ayuda para una persona ciega que me asesora sobre problemas que tiene con su lector de pantalla y sus sitios web.

Siempre aprendiendo aquí, agradecemos tu ayuda.

Nel

Autor del tema

(@ahortin)

Hace 3 años, 1 mes

Hola Nel,

¡No hay problema! Perdón por la demora en responderle sobre esto. Aunque me alegro de que todo funcione para ti 🙂

¿Solucionó tu problema??

SíNo

0 / 0