Change 'SEARCH' icon


#1

Hello,

Sorry for another question.

I’m trying to change the search button to something like a magnifying glass icon. But, I can’t seem to find where about in the code the button is defined so I can change it.
Right now, I couldn’t even change the text to something other that ‘SEARCH’.

Anyone have in insight to this? This question was asked a while ago and is still unresolved…


#2

Hi cassafrass,

You can modify your search form at searchform.php


#3

Yea, I found that I could change the color of the buttons in style.css and the text in the search bar in searchform.php at:

<input type="submit" class="search-submit" value="<?php echo esc_attr_x( '<img src="search_.png">', 'submit button', 'athemes' ); ?>">

But I would like to make an icon appear instead of text which I haven’t been able to do.

If I were, for example, to put:

<input type="submit" class="search-submit" value="<?php echo esc_attr_x( '<img src="search_.png">', 'submit button', 'athemes' ); ?>">

All that shows up on the site it a black box with " <IMG SRC==“search_.png” "
Any idea how to make an icon, image, or something other than text appear there?


Searchform in Menu - Position and icon change - missing searchform.php
#4

Resolved!

I changed the searchform.php file to:

</label>
<button type="submit" class="fa fa-search fa-lg search-submit">	</button> 
	
	
</form>

And in the style.css I added:

.fa-search {
	padding: 11px; 
    border: none;
    color:white;
    background-color:#000000;
    vertical-align: middle;
    margin: 1px 0 0 -10px;
	} 

underneath the code for buttons (just above /* Tables */ )

This is with FontAwesome installed for the search icon.
Now to figure out how to implement that with a child-theme instead of on my personal server for messing with wordpress and I’ll be all set!
You should be able to just add the css directly to the child style.css but the button might take a little bit more work.


#5

Hi, thanks for your advice!

let see if would be implemented on the next version of this themes :smiley: