Change the search icon in twenty fourteen

Question

Change the search icon in twenty fourteen

4ndro1d

2020年10月19日 09:30

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.

Topic icon css Wordpress search

Category Web

zawhtut · Accepted Answer · 2020年10月19日 09:30

1

zawhtut answered at 2020年10月19日 09:30

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

fischi · Accepted Answer · 2014年3月5日 11:52

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.

Change the search icon in twenty fourteen

About