Social icons not showing?

Site URL: https://www.energystoreltd.com/

I've added LinkedIn and Facebook to the footer - I can see them when editing my site but can't see them on the live website... does anyone have any idea why this the social links aren't showing?

Thanks!

33 minutes ago, PartTwoDesign said:

Site URL: https://www.energystoreltd.com/

I've added LinkedIn and Facebook to the footer - I can see them when editing my site but can't see them on the live website... does anyone have any idea why this the social links aren't showing?

Thanks!

Have you saved your site squarespace yet?

My result after saving

Support me by pressing 👍 if this useful for you

@bangank36yes my site is saved and live - https://www.energystoreltd.com/ 

You can tell the icons are there when you roll over the area in the footer (see screenshot below) - but they just aren't showing up.

@PartTwoDesign Try removing icons > Save page >> Then add icon again

@tuanphan Hi Tuan! When I added the icons back in, the same thing happens - they aren't visible in "Knockout" style but I can tell they are there as the mouse hovers over the links. 

I've tried changing them to the "Solid" design and now I'm seeing the below - I think something in my custom code is messing with them? 

On 10/7/2021 at 10:17 PM, PartTwoDesign said:

@tuanphan Hi Tuan! When I added the icons back in, the same thing happens - they aren't visible in "Knockout" style but I can tell they are there as the mouse hovers over the links. 

I've tried changing them to the "Solid" design and now I'm seeing the below - I think something in my custom code is messing with them? 

 

 

I checked the icon code, and it seems that some of the code from the icon itself has problems. You can't solve this, Squarespace will need to check.

In the meantime, you'll need custom code to insert the icon. What icons do you want to insert? We will check and give code to insert new icon.

Hi @tuanphan thank you!

We'd like to add LinkedIn and Facebook:

https://www.linkedin.com/company/energystore-limited/

https://www.facebook.com/energystoreltd/

You had previously supplied me with the below code as we'd like the icons to change to orange on hover (however I had since removed this code from the site when troubleshooting the icon issue)

//--On Page Icons
.sqs-use--icon {fill:black!important;}
.sqs-use--mask {fill:white!important;}
.sqs-svg-icon--wrapper {border-color:white!important}

//-- Hover effect from the tutorial
.sqs-svg-icon--wrapper:hover .sqs-use--mask {fill:#e33c31!important;}

Thanks,

Anna

On 10/11/2021 at 5:50 PM, PartTwoDesign said:

Hi @tuanphan thank you!

We'd like to add LinkedIn and Facebook:

https://www.linkedin.com/company/energystore-limited/

https://www.facebook.com/energystoreltd/

You had previously supplied me with the below code as we'd like the icons to change to orange on hover (however I had since removed this code from the site when troubleshooting the icon issue)

//--On Page Icons
.sqs-use--icon {fill:black!important;}
.sqs-use--mask {fill:white!important;}
.sqs-svg-icon--wrapper {border-color:white!important}

//-- Hover effect from the tutorial
.sqs-svg-icon--wrapper:hover .sqs-use--mask {fill:#e33c31!important;}

 

Thanks,

Anna

Hi,

Try adding a Code Block >> Paste this code

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
<ul class="t-social">
<li>
  <a href="https://www.facebook.com/energystoreltd/" target="_blank">
  <i class="fab fa-facebook-f"></i>
  </a>
</li>
<li>
  <a href="https://www.linkedin.com/company/energystore-limited/" target="_blank">
  <i class="fab fa-linkedin-in"></i> 
  </a>
</li>
</ul>
<style>
  /* code block padding top bottom */
  .code-block {
    padding-top: 0;
    padding-bottom: 0;
}
  /* social icons code */
.t-social {
    display: block;
    margin: 0 auto;
    padding-top: 5px;
    text-align: center;
  	padding-left: 0;
}
  .t-social li {
  display: inline-block;
    margin: 0;
    line-height: 100%!important;
  }
  .t-social li i {
    font-size: 30px;
    margin: 0 20px;
    color: black;
}
  .t-social li:hover i {
  	color: #e33c31;
  }
</style>

Thanks @tuanphanI'm afraid this isn't working quite right just yet - https://www.energystoreltd.com/ 

The code block is appearing as two dashes:

We'd like the icons to smoothly fade to red (#e33c31) on hover, like this:

On 10/13/2021 at 8:25 PM, PartTwoDesign said:

Thanks @tuanphanI'm afraid this isn't working quite right just yet - https://www.energystoreltd.com/ 

The code block is appearing as two dashes:

 

We'd like the icons to smoothly fade to red (#e33c31) on hover, like this:

 

adh, remove the code & use this new code

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
<ul class="t-social">
<li>
  <a href="https://www.facebook.com/energystoreltd/" target="_blank">
  <i class="fab fa-facebook-f"></i>
  </a>
</li>
<li>
  <a href="https://www.linkedin.com/company/energystore-limited/" target="_blank">
  <i class="fab fa-linkedin-in"></i> 
  </a>
</li>
</ul>
<style>
  /* code block padding top bottom */
  .code-block {
    padding-top: 0;
    padding-bottom: 0;
}
  /* social icons code */
.t-social {
    display: block;
    margin: 0 auto;
    padding-top: 5px;
    text-align: center;
  	padding-left: 0;
}
  .t-social li {
  display: inline-block;
    margin: 0;
    line-height: 100%!important;
  }
  .t-social li i {
    font-size: 30px;
    margin: 0 20px;
    color: #e33c31;
}
  .t-social li:hover i {
  	color: #e33c31;
  }
  ul.t-social li:before {
    display: none !important;
}
</style>

Hi @tuanphan - you can see how it's looking now: https://www.energystoreltd.com

Do you think there's any way of using the code block to get the icons in a circle and aligned left? 

On 10/18/2021 at 8:21 PM, PartTwoDesign said:

Hi @tuanphan - you can see how it's looking now: https://www.energystoreltd.com

Do you think there's any way of using the code block to get the icons in a circle and aligned left? 

 

Add this to Code Block

<style>
  ul.t-social {
    text-align: left;
}
  .t-social li i {
    background-color: #e33c31;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    color: white;
    border-radius: 50%;
    margin: 5px;
    text-align: center;
}
</style>
  

Hi, I'm having the same problem. When editing, the social icons show just fine. But on the public website, it only shows the solid block color. Though, when I hover it still shows the right social link. 

My website link is https://www.mrbfinance.com/
 

Would you please help me on this too? @tuanphan

Thank you so much in advance! 

On 3/29/2022 at 11:16 AM, MRBFin said:

Hi, I'm having the same problem. When editing, the social icons show just fine. But on the public website, it only shows the solid block color. Though, when I hover it still shows the right social link. 

My website link is https://www.mrbfinance.com/
 

Would you please help me on this too? @tuanphan

Thank you so much in advance! 

Yes. Same problem here. Have you tried contacting SS Customer Care yet? 

On 3/30/2022 at 3:23 PM, tuanphan said:

Yes. Same problem here. Have you tried contacting SS Customer Care yet? 

Hi @tuanphan Thank you so much for your reply! I have tried contacted SS Customer service, she mentioned the issue was most likely caused by custom code injection, but can't pin point the exact code responsible for it. 

I have tried disabling the codes on my site but the problem still persists. 

Is there any way to know which code causes the trouble? Or if not, is there any other way to show social icons, some other code maybe? 

Thank youu!

Temporarily, You can check the result of your code via accessing your site with the Incognito. Just wait until SS fixes this bug