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;


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