Add background color to search icon

Solved
Highlighted
Tourist
7 1 0

I have been trying to add a background color to the search icon as the attached image (image 1_icon).

image 1_icon.png

My coding knowledge is very limited. I was only able to change the search icon color in header.liquid file:

<form action="/search" method="get" class="input-group search-bar {{ search_bar_location }}" role="search">
<input type="hidden" name="type" value="{{ settings.search_type }}">
<input type="search" name="q" value="{{ search.terms | escape }}" placeholder="{{ 'general.search.placeholder' | t }}" class="input-group-field" aria-label="{{ 'general.search.placeholder' | t }}">


<div class="input-group-btn">
<button type="submit" class="{{ search_btn_style }}">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-search" color="blue" viewBox="0 0 64 64"><path d="M47.16 28.58A18.58 18.58 0 1 1 28.58 10a18.58 18.58 0 0 1 18.58 18.58zM54 54L41.94 42"/></svg>
<span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
</button>
</div>

 

Can I add the background color to the search icon directly on this file? Any suggestions on how the code should be?

Thank you so much for your help!

 

Haisih


</form>

0 Likes
Highlighted
Shopify Partner
717 99 130
Hello, @haisih Thanks for post Please share your site URL, So I will check and provide a solution here.
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted

Success.

Tourist
7 1 0

Hi @KetanKumar , here is the link:

1928.com

 

Thank you!

0 Likes
Highlighted

Success.

Hello @haisih,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file

.search-bar .icon.icon-search {
	color: #fff;
}
.search-bar .input-group-btn {
	background-color: #626369;
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Tourist
7 1 0

Thank you so much! It works!

0 Likes