Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How can I change the hover color on a custom social media icon?


pixies1

Question

Site URL: https://typeaprofessionals.com

Hello! For my social media icons, I was able to replace Squarespace's generic link icon with a customized Google icon using the code below (and uploading an image of the Google icon).

However, I would like the Google icon to hover on the same color as my other social media icons. Does someone know how to add to my code below to make this work?

Thank you in advance!

------

//replace link icon with Google icon//

.sqs-svg-icon--list a:nth-of-type(2) { svg {  display:none;  }  background-image: url(https://static1.squarespace.com/static/5ec8617eea936a6584ab0cca/t/603c4d56d5c9360a36489e3a/1614564694083/G+icon.png);  background-size: 83%;  background-repeat: no-repeat;}


//social media icons color//

//standard color//
.sqs-use--icon {
  fill: #d9d9d6 !important;
}

//social media icons color on hover//
.sqs-svg-icon--wrapper:hover {
  .sqs-use--icon {
    fill: #babc16 !important;
  } 
}

Link to comment

Recommended Posts

  • 0
On 5/21/2021 at 6:58 AM, pixies1 said:

Thanks, Tuan, though unfortunately this code doesn't fix it, it puts them in three skinny columns instead!

Can you keep the code? We can check easier.

We tested on browser & see it should work.

image.thumb.png.5637dfa859f8ffd10755f644d9100f65.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

Hi Tuan,

I added both blocks of CSS (below) and now it looks right. Thank you!

 

// testimonials - tablet 2 columns //
@media screen and (max-width:991px) and (min-width:768px) {
div#block-yui_3_17_2_1_1619732613520_13491+.row .span-4 {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
}
// tablet testimonials //
@media screen and (max-width:991px) and (min-width:768px) {
div#block-yui_3_17_2_1_1619732613520_13491+.row .span-4 .code-block {
    width: 50%;
}
}

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...