Search icon questions

Site URL: https://andrea.co

Hi there, 

I have a question. 

• How do I change the hover color of my search icon?

I've tried with this, but it doesn't work 

.Header-search-form 
  a:hover {
  fill: #0a97a9 !important;
  stroke: #0a97a9 !important;
  color: #0a97a9 !important; 
  } 

Thanks

Andrea

Use this CSS

.Header-search-form-submit:hover svg {
    stroke: red !important;
}

Thanks a lot. 

Do you know if there is a way to change the search icon onto the search page? 

Thanks
Andrea

Search Page Icon uses Image, not color.

You can use this code

.sqs-search-page-input {
    background-image: url(paste new icon url here) !important;
}

Amazing. Thanks. Done!

Hi there! @Contz I love your site- how were you able to change your header- do you have 7.1? Right now I have a "search" button but I want a magnifying glass connecting people to to the /search page... (ideally I would like a search bar embedded but it sounds like from reading other posts in the forum that isn't doable with 7.1.)  @tuanphan would these codes work for my site too? Do i put them in settings>advanced>code injection or in the Custom CSS? Or is there a way to change my (button) to an image?   Thanks!!! 

www.thebagboyz.com

7 minutes ago, sugarkw said:

Hi there! @Contz I love your site- how were you able to change your header- do you have 7.1? Right now I have a "search" button but I want a magnifying glass connecting people to to the /search page... (ideally I would like a search bar embedded but it sounds like from reading other posts in the forum that isn't doable with 7.1.)  @tuanphan would these codes work for my site too? Do i put them in settings>advanced>code injection or in the Custom CSS? Or is there a way to change my (button) to an image?   Thanks!!! 

www.thebagboyz.com

add to home > design > custom css

replace with your glass icon url

Hey there! Thanks @tuanphan. I tried:

5 hours ago, sugarkw said:

Hey there! Thanks @tuanphan. I tried:

.sqs-search-page-input { background-image: url https://www.thebagboyz.com//s/magnifyingglass.png !important; }

 

Into the design>custom CSS and it doesn't seem to be working. Sorry! I am a failure.  Any advice? Or did I screw it up?   (First I saved the image, inserted it as a file onto my not-linked section).

Your code is invalid.

.sqs-search-page-input {
    background-image: url(paste new icon url here) !important;
}

eg

.sqs-search-page-input {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/05/artboard-1-.jpg) !important;
}

See how to upload image/file: https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files

Hi there- I tried to fix it again. I can't get the search icon to work - I sent you an admin invite for the site. It did not add an icon in the navigation with a link to the search page, (preferably next to the cart). I have a search "button" there now, but I want the icon. Instead whatever I did messed with the search bar within the search page. 

 I will of course compensate you for your time- I hope its an easy fix! 

I have attached the screenshots for www.thebagboyz.com

Done. Line 01-Line 17 in Custom CSS box

@tuanphanYou are amazing!!! Truly. Thank you!