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

Updating the Tik Tok Social Icon


hayconley

Question

6 answers to this question

Recommended Posts

  • 0
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();
}

image.thumb.png.4973e9cc52bc5ce0ec98e105b02a2a6e.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0

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
  • 0
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>

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

 

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 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.

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...