help: turn search box into magnifying glass

outlandwild

Hi folks, does anyone know how to turn the search box widget into a simple magnifying glass?

here is an example website (not mine): https://www.chrisburkard.com/Pages/Portfolio

**Top right of page

Hikin' Mike

Add a HTML/CSS to your site.

HTML

<a href="your-site-url-here/search">
  <div class="magnifying-glass"></div
</a>

Make sure you change your-site-url-here to your website.

CSS

.magnifying-glass:before {
  content: '\E315';
  font-family: 'SmugMug Icon Font Regular';
  font-size: 20px;
  width: 20px;
}

outlandwild

Thank you so much Mike

One more question: is there a way to make it invisible on mobile view?

Hikin' Mike

@outlandwild said:
Thank you so much Mike

One more question: is there a way to make it invisible on mobile view?

Use this instead. SmugMug uses 736px or smaller as "mobile". It will display when the screen size is 737px or larger. When it's 736px or smaller it's hidden.

@media (min-width: 737px) {

  .magnifying-glass:before {
    content: '\E315';
    font-family: 'SmugMug Icon Font Regular';
    font-size: 20px;
    width: 20px;
  }

}

outlandwild

Thank you sir