Home>Support>how to change the color of the search icon in menu ?

how to change the color of the search icon in menu ?

By saomair, 7 years ago. Last reply by Sung Lee, 5 years ago.

Hello ,

I want to change the color of the search icon color which is in the menu ?

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 7 years, 10 months ago saomair

    please check this screenshot and tell me http://www.webpagescreenshot.info/i3/532798c3ed63a8-03710985 and want to change hover color of that search icon as well

    thank you

  2. 7 years, 10 months ago Ian Rossiter

    Hi Saomair

    I have let Greg know that you have been waiting :) I will make sure he gets back to you today.

  3. 7 years, 9 months ago saomair

    Thank you Ian Rossiter

  4. 7 years, 9 months ago saomair

    Hope he will reply today so that i can move forward thank you

  5. 7 years, 9 months ago Greg Priday Hi, I Work Here

    Hi saomair

    Very sorry for the delays. The issue comes in because the search icon is actually an image, so there are quite a few steps in changing it. This is something we hope to simplify in our future themes.

    The first thing you need to do is download the search icon from the theme folder. Download a ZIP copy, extract it, then go to the folder images/sprites/search-icon.png.

    You’ll need to edit this image in Photoshop to change its color. You’ll need to create 2 versions. The original version and the hover version. To set these up you should create a child theme. You can read up on creating child themes here. Place the 2 images you created in the images/sprites/ folder of your child theme. They should be called search-icon.png and search-icon-hover.png.

    For your child theme’s style.css, you’ll need to have all the required headers, an import of the original stylesheet and a few extra lines for the new search icon images.. Something like this.

     Theme Name:   Vantage Child
     Template:     vantage
     Version:      1.0.0
    @import url("../vantage/style.css");
    #search-icon #search-icon-icon .icon {
      background: url(./images/sprites/search-icon.png) no-repeat;
    #search-icon #search-icon-icon:hover .icon {
      background: url(./images/sprites/search-icon-hover.png) no-repeat;

    Finally, zip up your child theme, upload it to your server and activate it.

  6. 7 years, 9 months ago saomair

    thank you very much

  7. 5 years, 6 months ago Sung Lee

    I need that code for North theme. So to change the search icon color in North theme.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More