[Resolved] Search icon styling

[Harris]

Hello,

How can I add a round blue bg to the searh icon and change the icon color to white?
Something like https://www.iconfinder.com/icons/539825/blue_browse_circle_discover_explore_search_view_icon

Thanks!

GeneratePress 2.2.2

GP Premium 1.7.8

[Leo]

Hi there,

Give this CSS a shot:

.search-item a:before {
    background-color: #333;
    padding: 5px;
    border-radius: 50%;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Harris]

The circle is not exactly a circle. 🙂

I adjusted it with
padding: 8px 5px 8px 5px;

but not sure if its the appropriate way.

You can check it in the site url.

[Tom]

For it to be a true circle, you’d need to define a height and width:

.main-navigation .main-nav ul li.search-item a {
    line-height: normal;
}

.search-item a:before {
    background-color: #1c74b1;
    border-radius: 100%;
    color: white;
    width: 30px;
    height: 30px;
    line-height: 30px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Harris]

Perfect.
Thanks Tom!

[Tom]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts