Updating the Tik Tok Social Icon

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. 

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

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?

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>

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>

Hi,

is it possible to do it with a personal plan?

Thanks,

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

The old symbol and typography had some geometry, line unevenness, and an untidy line connecting issues (not referring to the 3D effect). All of them have been repaired using geometric forms and precisely calculated gaps. You used as an example how well-known logos were recently redone, switching from a 3D look to a more straightforward modern appearance. These methods were employed by you when redesigning the TikTok logo. To maintain brand awareness for the upcoming followers from SocialFollowersFree and the significance of the mark, you used the same color scheme for the "d" letter and the shape of the musical note.