Change Social Icon - Change the generic link icon

Squarespace supports limited platform logos. These logos automatically display when you add a URL from that platform in Social Links. All other links are show as generic link icons. I want to change the generic link icon into a social icon of the platform XING. I did not find any custom code and would be more than happy to find a solution for this.

Jeah that's a really bad thing.

I think about switching from wordpress to squarespace. But when i can't even Design my Header because of such a really easy thing that's really a showstopper. 

It would be ideal to manage the icons directly via the social links editor. It appears 7.1 now supports using custom CSS to add a custom social icon using the squarespace file manager.

https://www.rebeccagracedesigns.com/blog/custom-social-icons

Doesn't work for 7.0 though

11 hours ago, ChloeManson said:

It would be ideal to manage the icons directly via the social links editor. It appears 7.1 now supports using custom CSS to add a custom social icon using the squarespace file manager.

https://www.rebeccagracedesigns.com/blog/custom-social-icons

Doesn't work for 7.0 though

Do you need help?

12 hours ago, tuanphan said:

Do you need help?

Yes, I do, please 

18 hours ago, ChloeManson said:

Yes, I do, please 

Can you share site url? We can help easier

On 11/1/2020 at 9:58 AM, tuanphan said:

Can you share site url? We can help easier

Hi @tuanphan,

I don't intend to hijack this thread. That said, I found some CSS code that allowed me to use a custom image for the social icons in the header. The problem, though, is that those social icons don't match in the footer. Also, on mobile, the custom icons do not appear at all.

Any help on this?

site: http://www.takebackyourcareerpodcast.com

password: boots135

Code I am using:

//Social Icons - Apple Podcast//
@media only screen and (min-width:640px) {  .icon--fill:nth-of-type(1) { svg { display:none; }  background-image: url(https://static1.squarespace.com/static/5f69447dc6605c1f7a7ec913/t/5faaddb16f08616716072cac/1605033393260/iu-5.png);  background-size: 100%;  background-repeat: no-repeat;  }  }  .header-menu-actions-action:nth-of-type(1) {  svg {  display:none;  }  background-image: url(https://static1.squarespace.com/static/5f69447dc6605c1f7a7ec913/t/5faaddb16f08616716072cac/1605033393260/iu-5.png);  background-size: 100%;  background-repeat: no-repeat;  }

hey, there's a useful site that might solve your issue:
https://fontawesome.com

(after adding a piece of code, you can just copy/paste those icons
the social brands are mostly for free.)

for instance use this as the link title
<i class="fab fa-xing-square"></i>

and the code will replace it with the related icon (screenshot)
 

The good thing: Squarespaces treats it as header text so those icons will have the same color as the navigation.

PS: doesn't work with regular "p" text but with Buttons as well

14 hours ago, gogreenmsu said:

Hi @tuanphan,

I don't intend to hijack this thread. That said, I found some CSS code that allowed me to use a custom image for the social icons in the header. The problem, though, is that those social icons don't match in the footer. Also, on mobile, the custom icons do not appear at all.

Any help on this?

site: http://www.takebackyourcareerpodcast.com

password: boots135

Code I am using:

//Social Icons - Apple Podcast//
@media only screen and (min-width:640px) {  .icon--fill:nth-of-type(1) { svg { display:none; }  background-image: url(https://static1.squarespace.com/static/5f69447dc6605c1f7a7ec913/t/5faaddb16f08616716072cac/1605033393260/iu-5.png);  background-size: 100%;  background-repeat: no-repeat;  }  }  .header-menu-actions-action:nth-of-type(1) {  svg {  display:none;  }  background-image: url(https://static1.squarespace.com/static/5f69447dc6605c1f7a7ec913/t/5faaddb16f08616716072cac/1605033393260/iu-5.png);  background-size: 100%;  background-repeat: no-repeat;  }

 

Do you use Personal Plan or Business Plan?

2 hours ago, tuanphan said:

Do you use Personal Plan or Business Plan?

Business plan!

4 hours ago, ArminB said:

hey, there's a useful site that might solve your issue:
https://fontawesome.com

(after adding a piece of code, you can just copy/paste those icons
the social brands are mostly for free.)

for instance use this as the link title
<i class="fab fa-xing-square"></i>

and the code will replace it with the related icon (screenshot)
 

The good thing: Squarespaces treats it as header text so those icons will have the same color as the navigation.

PS: doesn't work with regular "p" text but with Buttons as well

Thank you! I will give this a look!

13 hours ago, tuanphan said:

Do you use Personal Plan or Business Plan?

I was able to figure it out with this code:

.icon[aria-label="URL"] svg {
  visibility:hidden;
}
.icon[aria-label="URL"] {
background-image: url(image.png);
    background-size: cover;
    background-repeat: no-repeat;
    transform:scale(1);
}

On 10/30/2020 at 2:28 PM, cinnamoncat said:

It would be ideal to manage the icons directly via the social links editor. It appears 7.1 now supports using custom CSS to add a custom social icon using the squarespace file manager.

https://www.rebeccagracedesigns.com/blog/custom-social-icons

Doesn't work for 7.0 though

awesome.  worked for me.  not this link but this one: https://www.rebeccagracedesigns.com/blog/replace-social-icons-in-header

Squarespace should support Telegram.  it's enormously popular

On 9/27/2021 at 9:03 AM, ekkis said:

awesome.  worked for me.  not this link but this one: https://www.rebeccagracedesigns.com/blog/replace-social-icons-in-header

Squarespace should support Telegram.  it's enormously popular

Did you solve or still need help?