Insert magnifying glass image (icon) inside search bar? - Forum | JoomShaper
Staff replied Helix Framework

Insert magnifying glass image (icon) inside search bar?

Asked by Shirley Craig 3 years ago Last activity 3 years ago

How to insert a magnifying glass image/icon inside the search bar instead of the text "Search..." ?

I tried this but nothing changes...

sp-search #sp-search-submit{background-image: url(https://dev.revuptech.com/templates/shaper_helixultimate/images/search.png) 50% 50% no-repeat;width:26px;height:26px;z-index:9999;border:none;right:15px;top:2px;position:absolute;text-indent:-99999px;}

Thank you.

1 reply

Paul Frankowski Senior Staff
3 years ago

Hi Shirley,

#mod-search-searchword265::placeholder {
  color: transparent;
}

#mod-search-searchword265 {
  background-image: url(https://www.dev.revuptech.com/images/icon.png);
  background-position: right;
  background-repeat: no-repeat;
}

first find magnifying glass icon (png, 16x16px) and upload to /images folder

Whole rest is in your hands!

Log in to reply.