Icon changes from round to square shape on hover


I am using icons in a features widget. They are round shape, link to a page. I was able to get the icons to change color on hover, but they also change shape. I need them to retain their round shape. I tried a few bits of code both in the Custom CSS and the additional CSS panels, to no avail. This is the code I am using for the hover color change:

.sow-icon-elegantline:hover {background-color: #339900;

Attached is a screenshot. I want the green one to be round too, not square. Any suggestions? Thanks for your help.



Can you share your site here?

I can’t - the site is in beta, not public.

I can email you access to the WP dashboard, though. I’d like to get this to work. Let me know, thanks.

Hi again, never mind, I solved this one :slight_smile:

Here is the code I used, if someone has the same problem:

.sow-icon-elegantline:hover {
color: white!important;

.sow-icon-container .sow-icon-elegantline:hover {
background-color: #339900!important;
border-radius: 50%!important;

1 Like

Great! I am happy that you can resolve the issue and share the solutions in here