Guest Posted August 30, 2020 Share Posted August 30, 2020 Site URL: https://www.genzwearethefuture.org/ On the contact page, there is a place where i put social links and i want to find out if there is a way i can change the link icon into the tiktok icon. Link to comment
Beyondspace Posted August 30, 2020 Share Posted August 30, 2020 1 hour ago, Maame said: Site URL: https://www.genzwearethefuture.org/ On the contact page, there is a place where i put social links and i want to find out if there is a way i can change the link icon into the tiktok icon. Hello there, plese follow To add CSS, go to Design -> Custom CSS a.icon.icon--fill[href*=tiktok] { position: relative; } a.icon.icon--fill[href*=tiktok]:after { content: ''; position: absolute; background: url(https://uxwing.com/wp-content/themes/uxwing/download/10-brands-and-social-media/tiktok.png); background-size: contain; background-repeat: no-repeat; width: 100%; height: 100%; top: 0; left: 0; } 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
khayrab Posted September 9, 2020 Share Posted September 9, 2020 On 8/30/2020 at 6:15 AM, bangank36 said: Hello there, plese follow To add CSS, go to Design -> Custom CSS a.icon.icon--fill[href*=tiktok] { position: relative; } a.icon.icon--fill[href*=tiktok]:after { content: ''; position: absolute; background: url(https://uxwing.com/wp-content/themes/uxwing/download/10-brands-and-social-media/tiktok.png); background-size: contain; background-repeat: no-repeat; width: 100%; height: 100%; top: 0; left: 0; } This didn't work for me so far. Website: khayrab.com Link to comment
Beyondspace Posted September 11, 2020 Share Posted September 11, 2020 khayrab a.sqs-svg-icon--wrapper[href*=tiktok] { position: relative; } a.sqs-svg-icon--wrapper[href*=tiktok] svg { display: none; } #contact a.sqs-svg-icon--wrapper[href*=tiktok]:after { filter: -webkit-filter: invert(0); filter: invert(0); } a.sqs-svg-icon--wrapper[href*=tiktok]:after { content: ''; position: absolute; background: url(https://uxwing.com/wp-content/themes/uxwing/download/10-brands-and-social-media/tiktok.png); filter: -webkit-filter: invert(1); filter: invert(1); background-size: contain; background-repeat: no-repeat; width: 100%; height: 100%; top: 0; left: 0; } 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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.