Change the word Search in the search widget for an icon

Hi there,

Try this PHP function:

add_filter( 'generate_search_placeholder','lh_search_placeholder_icon' );
function lh_search_placeholder_icon()
{
	return '';
}

Adding PHP: https://docs.generatepress.com/article/adding-php/
Reference: https://docs.generatepress.com/article/generate_search_placeholder/

With this CSS:

.widget .search-field {
    font-family: GeneratePress;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Oops the return value didn't show up correctly. See this:
https://www.screencast.com/t/n7nVATq2p

It did not work Leo.
The same square is shown but at the beginning of the search field (not on the button), the search button shows the text: Search

Any chance you can link us to your site so we can see what's wrong?

Let me know :)

I already added the link to my site Tom
Thank you.

It's not working because the widget is added within Elementor.

Try this for your CSS instead:

.elementor-widget .search-field {
    font-family: GeneratePress;
}

Thanks Leo, it worked perfect to replace the text with the magnifying glass icon.

But I really did not want that, excuse me, it is possible that you explain me wrongly.

The tutorial that Tom published here replaces the text of the Search button (to the right of the text field, not where the search text is entered) by a Font Awesome icon. When he tried to apply it he did not do it and substituted it for a square.

My question was if I could replace that Font Awesome icon with Generatepress.

Sorry for the inconvenience.

P.D.: I applied it on my website, so you can see how it looks.

Try this for the CSS:

.search-submit {
    font-family: GeneratePress;
}

Thanks Leo, it worked.

Also add this php code, for it to work:

add_filter( 'generate_search_button','generate_custom_search_button' );
function generate_custom_search_button()
{
	return '';
}

No problem :)