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

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.