ZacLai Posted June 6 Posted June 6 Good day, I run multiple social media accounts and want them linked to my site: https://www.zacharylaiphotography.com As you can see I have 2 IG accounts, but there's nothing to differentiate the two visually (both are IG icons) without the user hovering their cursor over the icons to see the difference in URL. This of course is not ideal. Is there a way to add a text or use different icons to show the difference between the 2 IG accounts? Thanks
tuanphan Posted June 7 Posted June 7 You can use this code to Website > Website Tools > Custom CSS a.SocialLinks-link.instagram-unauth[href*="zachlaipro"]:after { content: "zachlaipro"; font-size: 10px; display: block; position: absolute; bottom: -10px; color: #000; } a.SocialLinks-link.instagram-unauth[href*="zachagraphy"]:after { content: "zachagraphy"; font-size: 10px; display: block; position: absolute; bottom: -10px; color: #000; } a.SocialLinks-link.instagram-unauth { overflow: visible !important; } nav.SocialLinks { overflow: visible; } 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!)
ZacLai Posted June 7 Author Posted June 7 (edited) That worked beautifully! Thank you so much. Is there also a code to make it work for mobile too? Currently it only works for desktop. Also for the smaller social icons at the bottom of the page? Edited June 7 by ZacLai
Solution tuanphan Posted June 8 Solution Posted June 8 With bottom of page, use this CSS code div.socialaccountlinks-v2-block a[href*="zachlaipro"]:after { content: "Portfolio"; font-size: 10px; display: block; position: absolute; bottom: -25px; color: #000; } div.socialaccountlinks-v2-block a[href*="zachagraphy"]:after { content: "zachagraphy"; font-size: 10px; display: block; position: absolute; bottom: -25px; color: #000; } div.socialaccountlinks-v2-block a { overflow: visible !important; } With mobile I don't see icons on mobile, can you take a screenshot? 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!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment