Cover Page: how to edit TikTok link icon in the same style as other social links icons

Site URL: https://alexanderfantini.com/

Hello there!

I'm currently trying to change the TikTok icon in the Social Links - would love to retain animation and hover state (mask).

https://alexanderfantini.com/

I can't seem to be able to target the social-url with ref tiktok.

Would love to include the snippet in the Advanced > Page Header Injection of the page!

Many thanks in advance!

P.s. in the rest of the website I'm running this code and would love to have the same icon and size.

/* TikTok Logo Social */
.header-actions-action--social [href *='tiktok']:after, .sqs-svg-icon--list [href *='tiktok']:after  {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    background-image: url('https://api.iconify.design/ic/outline-tiktok.svg?color=black');
    background-repeat: no-repeat;
    background-position: center center;
  }
  
  .header-actions-action--social [href *='tiktok']:hover:after, .sqs-svg-icon--list [href *='tiktok']:hover:after  {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    background-image: url('https://api.iconify.design/bxl/tiktok.svg?color=white');
    background-repeate: no-repeat;
    background-position: center center;
  }
  
  .header-actions-action--social [href *='tiktok'], .sqs-svg-icon--list [href *='tiktok'] {
    position: relative;
  }
  .header-actions-action--social [href *='tiktok'] svg, .sqs-svg-icon--list [href *='tiktok'] svg {
    visibility: hidden;
  }

Try this code to Cover Page Header

<style>
  /* TikTok Logo Social */
[href *='tiktok']:after, [href *='tiktok']:after  {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    background-image: url('https://api.iconify.design/ic/outline-tiktok.svg?color=black');
    background-repeat: no-repeat;
    background-position: center center;
  }
  
  [href *='tiktok']:hover:after, [href *='tiktok']:hover:after  {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    background-image: url('https://api.iconify.design/bxl/tiktok.svg?color=white');
    background-repeat: no-repeat;
    background-position: center center;
  }
  
  [href *='tiktok'], [href *='tiktok'] {
    position: relative;
  }
  [href *='tiktok'] svg, [href *='tiktok'] svg {
    visibility: hidden;
  }
  [href*="tiktok"] {
    background-color: white;
}
</style>

You're an absolute wizard!!!

It's almost fully working!

I managed to strip it down (with the base look and without doubling up the logo on hover) by using:

/* TikTok Logo */
[href *='tiktok'] {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    background-image: url('https://api.iconify.design/ic/outline-tiktok.svg?color=black');
    background-repeat: no-repeat;
    background-position: center center;
    background-color: white;
  }
  
[href *='tiktok'] svg, [href *='tiktok'] svg {
    visibility: hidden;
  }

As it stands though, if I hover the cursor over any other icon, it still keeps the TT icon highlighted.

(Essentially in the cover page the social links that are not selected drop in opacity, vs the rest of the website where the hovered one is highlighted!)

I'd imagine there is a different approach than using this perhaps?

[href *='tiktok']:hover:after  {
    xxxxxx <--- the other icons should dim
  }

It would be great to solve this, but incredibly happy with this for the time being!!!

Thank you a milli @tuanphan!!!

On 2/28/2022 at 7:39 AM, alexanderfantini said:

You're an absolute wizard!!!

It's almost fully working!

I managed to strip it down (with the base look and without doubling up the logo on hover) by using:

/* TikTok Logo */
[href *='tiktok'] {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    background-image: url('https://api.iconify.design/ic/outline-tiktok.svg?color=black');
    background-repeat: no-repeat;
    background-position: center center;
    background-color: white;
  }
  
[href *='tiktok'] svg, [href *='tiktok'] svg {
    visibility: hidden;
  }

As it stands though, if I hover the cursor over any other icon, it still keeps the TT icon highlighted.

(Essentially in the cover page the social links that are not selected drop in opacity, vs the rest of the website where the hovered one is highlighted!)

I'd imagine there is a different approach than using this perhaps?

[href *='tiktok']:hover:after  {
    xxxxxx <--- the other icons should dim
  }

It would be great to solve this, but incredibly happy with this for the time being!!!

Thank you a milli @tuanphan!!!

With hover, use this

<style>
  [href*="tiktok"]:hover {
    background-image: url('https://api.iconify.design/ic/outline-tiktok.svg?color=black');
  }
</style>

Replace with new image url

Thank you very very much @tuanphan!

I really appreciated your support here!!

In the end, the hovering highlight was still taking place if I hovered the other icons too - whereas the current style dropped the opacity of the social icons that were not directly selected!

The code I came up with to fix this overall is this:

<style>
  
/* TikTok Logo */
[href *='tiktok'] {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    background-image: url('https://api.iconify.design/ic/outline-tiktok.svg?color=black');
    background-repeat: no-repeat;
    background-position: center center;
    background-color: white;
  }
  
/* Hide URL logo */
[href *='tiktok'] svg, [href *='tiktok'] svg {
    visibility: hidden;
  }

/* Opacity transition not directly hovered */
[data-slice-type="social-icons"]:hover [href *='tiktok']:not(:hover){
    opacity: 50%;
  	transition-property: opacity;
    transition-duration: 170ms;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
  }

</style>

I couldn't have done it without your help though!!

Many many thanks!