Jump to content

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

Go to solution Solved by katycarlisle,

Recommended Posts

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,


Link to comment
  • Solution

You should be able to put the CSS in the Page Settings under Advanced > Header Code Injection. Just remember to put the CSS in between <style> </style> tags.

However, Squarespace should now automatically display the TikTok icon (I know it didn't originally) so it might be worth removing and re-adding to see if that solves the problem. I added your account onto a cover page and it worked for me. 


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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.