hayconley Posted April 16, 2021 Share Posted April 16, 2021 Site URL: http://www.jywrrn.com My coding knowledge is extremely limited. I just added my client's TikTok account to his Squarespace's 'Social icon' Editor. When it populates, it just adds a link icon instead of auto-populating with the TikTok icon. Is there a way to replace it? I didn't see many options for customization in the editor. Beyondspace 1 Link to comment
Beyondspace Posted April 16, 2021 Share Posted April 16, 2021 4 hours ago, hayconley said: Site URL: http://www.jywrrn.com My coding knowledge is extremely limited. I just added my client's TikTok account to his Squarespace's 'Social icon' Editor. When it populates, it just adds a link icon instead of auto-populating with the TikTok icon. Is there a way to replace it? I didn't see many options for customization in the editor. try add this to Design->Custom CSS a[href*="tiktok"].icon-wrapper svg { display: none; } a[href*="tiktok"].icon-wrapper:after { content: ''; background-image: url('https://cdn.iconscout.com/icon/free/png-256/tiktok-2270636-1891163.png'); width: 25px; height: 25px; background-size: cover; left: 50%; top: 50%; transform: translate(-50%, -50%); position: absolute; filter: invert(); } tuanphan 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
hayconley Posted April 16, 2021 Author Share Posted April 16, 2021 Thank you so much @bangank36 for offering some help! I added the code per your instructions and can see that it updates the social icon accordingly in the editor, but when I click to view it in the live site... it's still the same generic link icon. Any advice there? Link to comment
Beyondspace Posted April 17, 2021 Share Posted April 17, 2021 5 hours ago, hayconley said: Thank you so much @bangank36 for offering some help! I added the code per your instructions and can see that it updates the social icon accordingly in the editor, but when I click to view it in the live site... it's still the same generic link icon. Any advice there? Sorry it was cover page, you may need to add it into Page advance Code injection and wrap the css within <style> .. </style> BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
tuanphan Posted April 19, 2021 Share Posted April 19, 2021 On 4/16/2021 at 11:58 AM, hayconley said: Site URL: http://www.jywrrn.com My coding knowledge is extremely limited. I just added my client's TikTok account to his Squarespace's 'Social icon' Editor. When it populates, it just adds a link icon instead of auto-populating with the TikTok icon. Is there a way to replace it? I didn't see many options for customization in the editor. Hover on Cover Page in Main Navigation or Not Linked > Click gear icon to opean Page Header > Click Advanced > Paste above code The code should be <style> a[href*="tiktok"].icon-wrapper svg { display: none; } a[href*="tiktok"].icon-wrapper:after { content: ''; background-image: url('https://cdn.iconscout.com/icon/free/png-256/tiktok-2270636-1891163.png'); width: 25px; height: 25px; background-size: cover; left: 50%; top: 50%; transform: translate(-50%, -50%); position: absolute; filter: invert(); } </style> nikitash 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
nikitash Posted September 9, 2021 Share Posted September 9, 2021 Hi, is it possible to do it with a personal plan? Thanks, Link to comment
tuanphan Posted September 12, 2021 Share Posted September 12, 2021 On 9/9/2021 at 7:27 PM, nikitash said: Hi, is it possible to do it with a personal plan? Thanks, Add to Design > Custom CSS with Personal Plan a[href*="tiktok"].icon-wrapper svg { display: none; } a[href*="tiktok"].icon-wrapper:after { content: ''; background-image: url('https://cdn.iconscout.com/icon/free/png-256/tiktok-2270636-1891163.png'); width: 25px; height: 25px; background-size: cover; left: 50%; top: 50%; transform: translate(-50%, -50%); position: absolute; filter: invert(); } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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