Add tiktok logo to website

Site URL: https://lilsuka.com

In the header I have my social media links, however I am unsure how to add a custom logo for tiktok. I have the image I wish to use my computer so I was hoping to know how to replace the link logo with the tiktok logo.

You can add this code to Home > Design > Custom CSS. Replace image in code with tik tok image url

a.icon.icon--fill[aria-label="URL"] svg {
    display: none;
}
a.icon.icon--fill[aria-label="URL"] {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/11/List-71.png);
    background-size: cover;
    background-repeat: no-repeat;
}

Thanks tuanphan, your custom CSS worked for me. However, it only worked in the site header and not the footer. Why is this?

1 hour ago, trainwithtimko said:

Thanks tuanphan, your custom CSS worked for me. However, it only worked in the site header and not the footer. Why is this?

Can you share link to your site? I guess footer icons has different class name.

On 4/27/2020 at 10:28 PM, tuanphan said:

Can you share link to your site? I guess footer icons has different class name.

https://www.trainwithtimko.com/

Thanks!

I tried your solution and it worked but it also overrode the icon for the regular URL. I saw a code somewhere where they specified to only change if it had "tiktok" in the css.

I'm looking for a solution that only impacts the tiktok url.

On 4/28/2020 at 4:28 AM, tuanphan said:

Can you share link to your site? I guess footer icons has different class name.

oh yeh this didn't work for my footer either, do you have the code to input this logo into the footer too?

On 4/28/2020 at 8:29 AM, trainwithtimko said:

Thanks tuanphan, your custom CSS worked for me. However, it only worked in the site header and not the footer. Why is this?

On 5/13/2020 at 6:21 AM, jansbri_ said:

I tried your solution and it worked but it also overrode the icon for the regular URL. I saw a code somewhere where they specified to only change if it had "tiktok" in the css.

I'm looking for a solution that only impacts the tiktok url.

.sqs-svg-icon--wrapper[href*="tiktok"] svg {
    display: none;
}
.sqs-svg-icon--wrapper[href*="tiktok"] {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/11/List-71.png);
    background-size: cover;
    background-repeat: no-repeat;
}

@tuanphan

Thanks for sharing above.

I used the CSS code you gave (the second one), but instead of https://beaverhero.com/wp-content/uploads/2019/11/List-71.png I should place a png icon of TikTok. How can I do?

Thanks a lot for your precious help

12 hours ago, silviacantu said:

@tuanphan

Thanks for sharing above.

I used the CSS code you gave (the second one), but instead of https://beaverhero.com/wp-content/uploads/2019/11/List-71.png I should place a png icon of TikTok. How can I do?

Thanks a lot for your precious help

 

Here my URL:

https://www.silviacantu.com/

Yes. You can replace with tiktok icon url.

On 4/27/2020 at 9:28 PM, tuanphan said:

Can you share link to your site? I guess footer icons has different class name.

I'm attempting to do the same thing, and the link icon is not changing. What am I doing wrong? This is the code I used

.sqs-svg-icon--wrapper[href*="tiktok"] svg {
    display: none;
}
.sqs-svg-icon--wrapper[href*="tiktok"] {
    background-image: url(https://static1.squarespace.com/static/5a08c31a64b05f2730b4121b/t/5f0a2ca5e08c710baddbc6a1/1594502309912/tiktok+white.png);
    background-size: cover;
    background-repeat: no-repeat;
}

And this is my website: https://www.ignitedinkwriting.com/

My social media links are in the footer.

On 7/11/2020 at 12:02 AM, silviacantu said:

 

53 minutes ago, caitlineditor said:

I'm attempting to do the same thing, and the link icon is not changing. What am I doing wrong? This is the code I used

.sqs-svg-icon--wrapper[href*="tiktok"] svg {
    display: none;
}
.sqs-svg-icon--wrapper[href*="tiktok"] {
    background-image: url(https://static1.squarespace.com/static/5a08c31a64b05f2730b4121b/t/5f0a2ca5e08c710baddbc6a1/1594502309912/tiktok+white.png);
    background-size: cover;
    background-repeat: no-repeat;
}

And this is my website: https://www.ignitedinkwriting.com/

My social media links are in the footer.

Remove above code, add this to Home > Settings > Advanced > Code Injection > Header

<script>
var tiktoks = document.querySelectorAll('a[href*="tiktok"]')

tiktoks.forEach(item => {
    item.innerHTML = `
<svg fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 50 50">
  <path fill-rule="nonzero" d="M37.006,22.323C36.779,22.344 36.549,22.358 36.316,22.358C33.693,22.358 31.388,21.009 30.047,18.97L30.047,30.507C30.047,35.216 26.229,39.034 21.52,39.034C16.811,39.034 12.993,35.216 12.993,30.507C12.993,25.798 16.811,21.98 21.52,21.98C21.698,21.98 21.872,21.996 22.047,22.007L22.047,26.209C21.872,26.188 21.7,26.156 21.52,26.156C19.116,26.156 17.168,28.104 17.168,30.508C17.168,32.912 19.116,34.86 21.52,34.86C23.924,34.86 26.047,32.966 26.047,30.562C26.047,30.467 26.089,10.968 26.089,10.968L30.105,10.968C30.483,14.559 33.382,17.393 37.006,17.653L37.006,22.323Z"/>
</svg>`
})
</script>
<style>
  [href*="tiktok.com"] {
    fill: white;
}
</style>

I was able to add the custom tiktok icon, but is there a way to change which icon it uses depending on which style header is being used? Like and if/then type of thing? The same applies for my site logo. On the home page the colored version is fine, but on the others I need to use the white version.

My home page has a white background and the social icons are black. Most other pages have a picture behind the header and the icons are white, but my custom icon stays black.

Unfortunately, I'm still waiting on domains transfers and my site it not live yet.

4 hours ago, dpattax said:

I was able to add the custom tiktok icon, but is there a way to change which icon it uses depending on which style header is being used? Like and if/then type of thing? The same applies for my site logo. On the home page the colored version is fine, but on the others I need to use the white version.

My home page has a white background and the social icons are black. Most other pages have a picture behind the header and the icons are white, but my custom icon stays black.

Unfortunately, I'm still waiting on domains transfers and my site it not live yet.

Can you site url? (you can share built-in domain: abcxyz.squarespace.com)

@tuanphan Is there a way to change the size to match the icons?

https://kangaroo-maracas-ggn6.squarespace.com/contact

password: kamila

13 hours ago, vvc said:

@tuanphan Is there a way to change the size to match the icons?

https://kangaroo-maracas-ggn6.squarespace.com/contact

password: kamila

Where is tiktok?

How did you fix the footer links?

Also, does this code work on 7.0 sites?

On 12/29/2020 at 3:02 AM, thecatalystudio said:

How did you fix the footer links?

16 hours ago, thecatalystudio said:

Also, does this code work on 7.0 sites?

If you share site url, we can help easier.

I'm working on a template preview right now, so I don't think you can see the new home page I'm working on. 😞

https://clavichord-tuna-eba4.squarespace.com/

On 12/31/2020 at 12:28 AM, thecatalystudio said:

I'm working on a template preview right now, so I don't think you can see the new home page I'm working on. 😞

https://clavichord-tuna-eba4.squarespace.com/

Just wrote this guide. Hope it help you.

Unfortunately, the guide didn't work. 😞

https://share.getcloudapp.com/eDuwKYbe

I followed the steps exactly and this is what I ended up with.

Also tried putting the CSS in the Custom CSS section and that didn't work either.

22 hours ago, thecatalystudio said:

Unfortunately, the guide didn't work. 😞

https://share.getcloudapp.com/eDuwKYbe

I followed the steps exactly and this is what I ended up with.

Also tried putting the CSS in the Custom CSS section and that didn't work either.

Header Icons needs different code.

Can you share link to page in screenshot? We can check easier

I see above link different screenshot

https://clavichord-tuna-eba4.squarespace.com/

On 1/5/2021 at 5:44 AM, tuanphan said:

Just wrote this guide. Hope it help you.

Hey @tuanphan! Thanks so much for this guide. I just tried it and was able to get it to work, but the TikTok icon sits higher than the others. (See screenshot.)

Is there a fix for this? I'm on 7.0, Brine.

(I can share the URL at a later date if that's useful, but have to keep it under wraps until Thursday because there's some sensitive info on it.) 

Thanks!

3 hours ago, LaurenWalters said:

Hey @tuanphan! Thanks so much for this guide. I just tried it and was able to get it to work, but the TikTok icon sits higher than the others. (See screenshot.)

Is there a fix for this? I'm on 7.0, Brine.

(I can share the URL at a later date if that's useful, but have to keep it under wraps until Thursday because there's some sensitive info on it.) 

Thanks!

Can you share site url? Above code I haven't tested on SS 7.0