Replace search button with fa icon

Resolved woody2016
(@woody2016)

8 years, 1 month ago

Hello, wondering if anyone can help please?

I would like to change the search submit button called for by <?php get_search_form(); ?> to use an fa icon. I have tried several things including the css:

.search-form input[type=”submit”] {
content: “\f179”;
display: inline-block;
-webkit-font-smoothing: antialiased;
/* font: normal 30px/1 ‘dashicons’; */
vertical-align: middle;
background: none;
border: none;
padding-left: 20px;
font-family: FontAwesome;
width: 60px;
}

This changes the background and text but does not show the icon. Was wondering if Quark handles the naming differently to my css reference ‘content: “\f179″;’ ?

I see in the Quark documentation that fa icons can be added using <i></i> tags, don’t think i can use this in this instance. Have considered creating a new form by copying into my functions file ‘the get_search_form()’ code from the wordpress code reference site and renaming it then calling it. But not sure what to change, i was also looking into a filter to change the icon but got stuck.

I referenced:

<input type=”submit” class=”search-submit” value=”‘. esc_attr_x( ‘Search’, ‘submit button’ ) .'” />

add_filter( ‘search-submit’, ‘search-submit-icon’ );
function search-submit-icon( $text ) {
return esc_attr_x( ‘’ );
}

but this keeled over my site so removed it!

Any ideas would be great, thanks in advance

Viewing 3 replies - 1 through 3 (of 3 total)

Theme Author Anthony Hortin
(@ahortin)

8 years ago
If you want to make a search field that uses a fontawesome icon for the button, then simply do the following:

Create a searchform.php file in your child theme with the following…
```
<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>
```
And add the following style to your stylesheet…
```
.search-form .search-submit {
	background-color: inherit;
	border: none;
}
```
Thread Starter woody2016
(@woody2016)

8 years ago

Hello Anthony,

Thank you very much for taking the time to develop the code, it works a treat, I had previously created an image and used that over the original search button with CSS to make the original button elements transparent, but this form version is ideal! I can see that the button icon replace method will be useful for other things i have in mind.

I see you have included the Screen reader echo which is great, I help a blind person who advises me on problems he has with his screen reader and websites.

Still always learning here, your help is much appreciated.

Nel

Theme Author Anthony Hortin
(@ahortin)

8 years ago

Hi Nel,

No problem! Apologies for the delay in getting back to you on this. Glad it’s all working for you though 🙂

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Replace search button with fa icon’ is closed to new replies.

Tags