I guess the title says all. I'm trying to change the search icon of the twenty fourteen theme, because I need a darker one.

I tried like this:

.search-toggle {
        background: url('.png');
    }

which results in nothing.

I guess the title says all. I'm trying to change the search icon of the twenty fourteen theme, because I need a darker one.

I tried like this:

.search-toggle {
        background: url('http://www.citizen-science.at/wordpress/wp-content/themes/cs/img/search-icon.png');
    }

which results in nothing.

• css
• search
• icon

2 Answers 2

This is more of a simple CSS question than actually related to WordPress.

However, you need to change your style.css. As TwentyFourteen does not use images, but pseudo css-classes, you need to change this as well:

.search-toggle {
    background: #fff url('http://www.citizen-science.at/wordpress/wp-content/themes/cs/img/search-icon.png') no-repeat;
    background-size: 30px;
    background-position: 10px;
}
.search-toggle:before {
    content: "";
}

By the way, your background image is huge. Try providing a smaller one.

Aside from TwentyFourteen, like Storefront,I had to use this. Since this thread is appearing in the top search. I have to place my code in here.

.widget_product_search form::before{
    color:#c26c5e !important;
}