Return to previous page

Change color/position of search icon in header

This topic has 8 replies, 3 voices, and was last updated 8 years, 2 months ago ago by Jack Richardson

forbesindustries

Participant

August 22, 2016 at 16:00

Is it possible to change the color of the search icon in the header? I’d also like to move it down just a bit. What is the CSS to target the search icon?

#137402 Copied Theme version: 4.6 WooCommerce version: 2.6.4

7 Answers
Jack Richardson

Support staff

August 22, 2016 at 16:11
Hello,

Try the following css code in Theme Options > Custom CSS > Global Custom CSS section:
```
.et-search-trigger .fa-search {
    color: #0066bf;
    margin-top: 8px;
}
```
Set the values to your needs.

Best regards,
Jack Richardson.
#137405 Copied
forbesindustries

Participant

August 22, 2016 at 16:21

Thank you, Jack!

The positioning worked but the code did not change the color of the magnifying glass icon.

Any other ideas?

#137406 Copied

Robert Hall

Support staff

August 22, 2016 at 16:28

Hello,

As I see it’s working perfect. See screenshot: http://prntscr.com/c8ygac

Regards,
Robert Hall

#137408 Copied

forbesindustries

Participant

August 22, 2016 at 16:42

But that’s not the color I assigned. This is my CSS in Theme Options > Custom CSS:

http://imgur.com/a/tNT83

#137409 Copied

Jack Richardson

Support staff

August 22, 2016 at 16:43

Hello,

Try to add !important to color property like this:
color: #0066bf !important;

Best regards,
Jack Richardson.

#137410 Copied

forbesindustries

Participant

August 22, 2016 at 16:50

That did it! Thanks, Jack!

#137413 Copied

Jack Richardson

Support staff

August 22, 2016 at 18:01

Hello,

You are welcome.

Best regards,
Jack Richardson.

#137424 Copied
Tagged: color, header, position, search icon, themes, woocommerce, wordpress
Viewing 8 results - 1 through 8 (of 8 total)

The issue related to '‘Change color/position of search icon in header’' has been successfully resolved, and the topic is now closed for further responses

Change color/position of search icon in header

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection