Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Add tiktok logo to website


Arta

Question

Recommended Posts

  • 1

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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.

Link to comment
  • 0
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?

Link to comment
  • 0
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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.

Link to comment
  • 0
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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.

Screen Shot 2020-08-24 at 12.46.07 PM.png

Screen Shot 2020-08-24 at 12.46.18 PM.png

Link to comment
  • 0
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.

Screen Shot 2020-08-24 at 12.46.18 PM.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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.

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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/

 

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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.)

image.png.126e4c4bfe19a2998c47ac04709d5ba4.png

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!

Link to comment
  • 0
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.)

image.png.126e4c4bfe19a2998c47ac04709d5ba4.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...