Social Media Icon Hover

Hi all,

I am trying to get black outlined social media icons to become solid yellow social media icons. I got it to change color but I cannot for the life of me figure out how to take off the outline. Is this possible?

Heres the code I have currently:

.sqs-svg-icon--list {
    a:hover {
    	opacity: 1 !important;
    	background-color:#fbc45d;
    	transition: all .2s ease 0s!important;}
    a:hover .sqs-use--icon {
    	fill: #F1EFED !important;
    	transition: all .2s ease 0s!important;}}

If you're looking for it on my site, they are in the footer. If you're feeling lazy, this is what the look like normally:

This is what they look like on hover:

I would just like that black outline to go away on hover. Thanks in advance!

Hi,

What is your site url?

Here it is! Sorry about that, I thought when I put it in the field of the question, it would be there.

On 3/8/2023 at 7:55 AM, tuanphan said:

Don't remove any code in your current code

Add this to Design > Custom CSS

footer.sections a.sqs-svg-icon--wrapper:hover {
    box-shadow: none !important;
}

 

It worked! Thanks so much!

@tuanphan can you please help with code to change the hover color of footer social icon? 

website: www.benkendall.com 

On 10/19/2023 at 6:00 AM, DesignPearl said:

@tuanphan can you please help with code to change the hover color of footer social icon? 

website: www.benkendall.com 

Use this CSS code (Website Tools > Custom CSS)

/* Footer Instagram hover color */
footer.sections a:hover use.sqs-use--icon {
    fill: #f1f !important;
}