css - Change the search icon in twenty fourteen

admin管理员组

文章数量:1319025

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

Share Improve this question asked Mar 5, 2014 at 11:39 4ndro1d4ndro1d 17911 gold badge11 silver badge1818 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

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;
}

本文标签： cssChange the search icon in twenty fourteen