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

Change Social Icon - Change the generic link icon


benediktfuhrmann

Question

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.

Edited by Benedikt
Initial Revision
Link to comment

13 answers to this question

Recommended Posts

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

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
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;  }

 

IMG_50D3364623A2-1.jpeg

Screen Shot 2020-11-10 at 1.51.18 PM.png

Edited by gogreenmsu
Link to comment
  • 0

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

Bildschirmfoto 2020-11-11 um 08.16.45.png

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

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

Bildschirmfoto 2020-11-11 um 08.16.45.png

Thank you! I will give this a look!

Link to comment
  • 0
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

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

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

Create an account or sign in to comment

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

×
×
  • Create New...