Your Own Search Block Icon

Look Demo

Swap out the default search block icon with your own. This plugin uses css editor and works with all template families.

How To Install

Add a search block to any page. Set the color theme to dark.

Once the search block has been added and saved, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

// Search Block Icon //

.sqs-search-ui-button-wrapper.color-dark .search-input {
  background-image: url(IMAGE-URL-HERE);
  background-size: 35px 35px;
  background-position: center left;

// Search Block - Text //

.sqs-search-ui-button-wrapper.color-dark .search-input {
  font-size: 24px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: #000000 !important;
  opacity: 1 !important;
}

Customize

Search Block Icon: Replace IMAGE-URL-HERE with the url of the icon you’d like to use and adjust the background size to make your icon bigger or smaller.

Search Block Text: This is the text within the search block. Feel free to adjust the font size, font weight, letter-spacing, and color to your liking.

The code works for the search block set to the dark theme, which is ideal for lighter themed websites. If you want to use the light themed search block, you will need to replace all “dark” text in the code with “light”.

License

This plugin comes with an Unlimited Use License. View License Terms