How can I modify and enlarge the search icon?

[Tom119]

Hi, how can i change this icon to a different image and make the icon bigger?

https://nomnomnomnom.myshopify.com

Pass: nomnom

[KetanKumar]

@Tom119

sorry for that issue can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.search-bar--modal button.btn.icon-fallback-text {
    background-image: url(https://cdn.shopify.com/s/files/1/0606/6860/8718/files/search2.png?v=1635506782);
    background-position: center;
    background-repeat: no-repeat;
}
span.icon.icon-search {
    display: none !important;
}

After Code

[Tom119]

@KetanKumar

Thank you, It works as you said for the pop up.

But on the search page, the icon is gone.

[KetanKumar]

@Tom119

yes please add this code

.search-bar--page button.btn.icon-fallback-text {
  background-image: url(https://cdn.shopify.com/s/files/1/0606/6860/8718/files/search2.png?v=1635506782);
  background-position: center;
  background-repeat: no-repeat; }

[Tom119]

@KetanKumar Thank you it works.

Can you help me one last time please?
The search icon in mobile menu is gone.

[KetanKumar]

@Tom119

yes please add this code

.search-bar--drawer button.btn.icon-fallback-text {
  background-image: url(https://cdn.shopify.com/s/files/1/0606/6860/8718/files/search2.png?v=1635506782);
  background-position: center;
  background-repeat: no-repeat; }

[Tom119]

@KetanKumar

I’ve added the code to theme.scss.liquid but mobile isn’t showing

[KetanKumar]

@Tom119

yes please try this code

.search-bar--drawer button.icon-fallback-text {
  background-image: url(https://cdn.shopify.com/s/files/1/0606/6860/8718/files/search2.png?v=1635506782);
  background-position: center;
  background-repeat: no-repeat; }

[Tom119]

@KetanKumar

Thank you, everything works.

You’re a life saver.

[KetanKumar]

@Tom119

its my pleasure to help us

[rashedhossain]

Dear Brother,

my search icon not showing. can you help please. my website is https://esteemfashionshop.com/

[KetanKumar]

@rashedhossain

can you please check your theme setting may be disable

[Bossismail1]

@rashedhossain

What a nice store to be precise. But can you please check your theme setting may be disable and also you haven’t include some business section in it.

1. you are suppose to add the blog page that will explain how the product will be used.

2. Product review to build trust with your visitor

3. Review of other customers to have full trust about your product

4. Language and currency converter Incase you have anyone ordering from other countries that doesn’t speak English.

5. Form page.