Custom CSS only working when open on squarespace editor but doesn't show on website cover page

Site URL: https://www.twenty4seventrends.com/

Hi, can someone tell me why I am having this issue where the TikTok logo I added to the website is not loading on the live website but only appears in the custom css?

Here is the code 

/* TikTok Logo coverpage */
[href *='tiktok'] {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    background-image: url(https://static1.squarespace.com/static/5df682403e4f3755a0064ca9/t/624df2e351e56f6e897d8e81/1649275619557/Tiktokcoverpagetest.png);
    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;
  }

Thank you,

Note: Custom CSS does not apply to Cover Pages.

I just read this now but if there is any way to work around it, it would be very appreciated!

Thank you so much!! I really appreciate the support!