Search icon styling

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 :)

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.

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

Perfect.
Thanks Tom!

No problem :)