Search block – add option for just mag glass icon?

it’s almost perfect but it doesn’t have the option to just have the magnifying glass icon instead of a button with the magnifying icon.

Hi @vytaulla51 how do you want the icon to be displayed, this is what l see on my end. What are you hoping to have?

Thank you for replying. I’m working on a site – just starting so just shell pages but in the navigation you’ll see what I cobbled together with the search: https://thdesigninc.com/dev/

It’s just the magnifying glass icon, not appearing to be in a button. It’s actually IN a black button but that is keeping me from being able to line the icon up with the navlinks below it…but that’s what I mean. The form field doesn’t appear until the button is clicked/tapped.

Make sense? Thanks!

Hi @vytaulla51,

Just to confirm – you’re wanting to make sure that the Search Icon in the very top row – is right aligned with the ‘Page Six’ item in the second row?

If that’s the case – I was able to have a little success by actually adjusting the right padding on the entire top row – which is something you should be able to do within the block settings (or the settings of your page builder). I found that 10px padding on the right hand side of that row seemed to work.

Could you please give that a try and see how it goes?

That’s not precisely the problem. The problem is the magnifying glass is in the middle of a button – a square that has padding. If the icon was by itself then padding on it could presumably be adjusted.

I went in and tried 0 padding-right on the top row block and nothing happened.

Thank you for taking a look. I can live with where the icon is – I’m just suggesting that an option to use the icon by itself would be nice.

Thanks!

The problem is the magnifying glass is in the middle of a button – a square that has padding. If the icon was by itself then padding on it could presumably be adjusted.

I see what you mean, you would rather have the magnifying icon only so that you can add it next to your menu items. Maybe we can achieve that using CSS The code below will change the background color for the search block to transparent and it will remove any padding about the search icon.

.wp-block-search__button
{
    background-color: transparent;
    color: #000000;
    padding: 0px;
}

Hi thelmachido: I tried adding the CSS you provided and it made the magnifying glass icon invisible until hovered over -)

But thank you for going to the trouble. My real desire is for the block itself to offer the icon-alone as an option. I know things can be adjusted via CSS – I’ve used CSS to get it to an acceptable place. But I’m making a “feature-request.” Is there somewhere else I should do that?

Thanks!

I’ve used CSS to get it to an acceptable place. But I’m making a “feature-request.” Is there somewhere else I should do that?

Hi @vytaulla51 sorry about the CSS but I am glad you have managed to sort of get the look you wanted using CSS code.

Feature requests are adding to the plugins GitHub repository, you can create one below:

https://github.com/WordPress/gutenberg/issues

Please feel free to add a link to this thread on the feature request and let me know if you need any assistance.

PS: Once you are done please add a link of the GitHub feature request to this thread.

Thanks.