Jump to content

Social icons not showing?

Recommended Posts

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

image.thumb.png.d8ea933aa50a1b82716610b9d025ef5c.png

Support me by pressing ūüĎć if this useful for you

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

@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? 

 

social-es.png.a60bd0fd40001cf741ad30e52e644c8c.png

 

Link to comment
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? 

 

social-es.png.a60bd0fd40001cf741ad30e52e644c8c.png

 

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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

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

Edited by PartTwoDesign
Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
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:

code-block.jpg.3aec1f2c68b3aec49dfd351f9db38c4e.jpg

 

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

socials.jpg.6b1d6b67e8e7e0d26ba5bbe0247ce806.jpg

 

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
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? 

 

socials-es.jpg.2aaa77d7617fffd53aafec7bca6d4f0a.jpg

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>
  

image.thumb.png.e30022971dccf48026c7ad095baacece.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
  • 5 months later...
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! 

Screen Shot 2022-03-29 at 11.12.41.png

Screen Shot 2022-03-29 at 10.46.57.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
  • 3 weeks later...
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!

Link to comment

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.