Jump to content

Search icon questions

Go to solution Solved by tuanphan,

Recommended Posts

  • Replies 12
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 5 weeks later...

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

Edited by sugarkw
Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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! 

Edited by sugarkw
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.