Icon changes from round to square shape on hover


#1

Hello,

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.

40%20PM


#2

Hi,

Can you share your site here?


#3

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


#4

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


#5

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


#6

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

Regards,
Awan