benediktfuhrmann Posted August 14, 2019 Share Posted August 14, 2019 (edited) 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 August 14, 2019 by Benedikt Initial Revision DavidKennedy and cinnamoncat 2 Link to comment
Guest Posted September 11, 2020 Share Posted September 11, 2020 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. Link to comment
cinnamoncat Posted October 30, 2020 Share Posted October 30, 2020 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 benediktfuhrmann 1 Link to comment
tuanphan Posted October 31, 2020 Share Posted October 31, 2020 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. 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
cinnamoncat Posted October 31, 2020 Share Posted October 31, 2020 12 hours ago, tuanphan said: Do you need help? Yes, I do, please Link to comment
tuanphan Posted November 1, 2020 Share Posted November 1, 2020 18 hours ago, ChloeManson said: Yes, I do, please Can you share site url? We can help easier 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
gogreenmsu Posted November 10, 2020 Share Posted November 10, 2020 (edited) 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; } Edited November 11, 2020 by gogreenmsu Link to comment
ArminB Posted November 11, 2020 Share Posted November 11, 2020 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 gogreenmsu 1 About Armin:Squarespace Expert Profile: https://www.squarespace.com/designer/profile/3649084Website: www.braunsberger-media.comLeaders Lodge: See my Profile Link to comment
tuanphan Posted November 11, 2020 Share Posted November 11, 2020 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. 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
gogreenmsu Posted November 11, 2020 Share Posted November 11, 2020 2 hours ago, tuanphan said: Do you use Personal Plan or Business Plan? Business plan! Link to comment
gogreenmsu Posted November 11, 2020 Share Posted November 11, 2020 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! Link to comment
gogreenmsu Posted November 11, 2020 Share Posted November 11, 2020 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); } tuanphan 1 Link to comment
ekkis Posted September 27, 2021 Share Posted September 27, 2021 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 zab 1 Link to comment
tuanphan Posted September 28, 2021 Share Posted September 28, 2021 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. 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment