Font Awesome social icons disappeared

Site URL: https://polarartist.no

Hello,

I have Font Awesome icons displayed throughout my site, but now they seem to have disappeared. I can still see them in the code, but they are not displayed correctly, and I'm not the best coder so I don't know how to fix this. Any help would be appreciated. I'm using the personal plan, so I do not have the header injection code, only on each page, but it has worked fine for months until now.

The code is supposed to be on any of the underlying gallery sides on https://www.polarartist.no/artister, for example https://www.polarartist.no/artist/aiming-for-enrike

The code I'm using:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">  

<style>
  /* code block padding top bottom */
  .code-block {
    padding-top: 0;
    padding-bottom: 0;
}

  /* social icons code */
.t-social {
    display: block;
    margin: 0 auto;
    padding-top: 5px;
    text-align: center;
      padding-left: 0;
}
  .t-social li {
  display: inline-block;
    margin: 0;
    line-height: 100%!important;
  }
  .t-social .fab,.fas {
    font-size: 28px;
    margin: 0 8px;
    color: black;
}
  .t-social .fa:hover {color: white;}
</style>

<ul class="t-social">
<li>
  <a href="https://www.facebook.com/aimingforenrike" target="_blank">
  <i class="fab fa-facebook-f"></i>
  </a>
</li>
<li>
  <a href="https://www.instagram.com/aimingforenrike/" target="_blank">
  <i class="fab fa-instagram"></i>
  </a>
</li>
<li>
  <a href="https://open.spotify.com/artist/78pR36HrjrFVIml89h1y4v?si=7ptyLM3XQf6p1-Sip4J2Og" target="_blank">
  <i class="fab fa-spotify"></i>
  </a>
</li>
<li>
  <a href="https://www.youtube.com/c/AimingForEnrike" target="_blank">
  <i class="fab fa-youtube"></i>
  </a>
</li>
<li>
  <a href="https://www.aimingforenrike.com/" target="_blank">
  <i class="fas fa-link"></i>
  </a>
</li>
</ul>
 

If you're on the Personal plan then you shouldn't have access to the header code injection globally or on individual pages (this may be different if you're on an old plan but it looks like you're on a new website, 7.1). Code injection is available when you're on a trial, but would be disabled when you purchase the personal plan. I don't know of a way to use fontawesome without code injection, but there are alternatives if you just want social icons with links. https://icons8.com/icons works just fine.

My problem is that I have already set the color to black, as you can see in the code I have written above, but when viewing it live on the page it has turned white (it also is white and off-center in editing mode). When you inspect the code and turn the color black again you can also see that the icons are not centered as they should be and I don't know where the problem lays. 😐

I haven't done any changes to the code in the last months and it has worked perfectly fine until now, so I was also wondering if Squarespace has done any changes that might have affected the code.

I was able to fix the social icons on the page by adding !important behind color and text-align. The problem was actually in the footer, where I also used somewhat the same code with white color and right align which overwrote the page code. I would not know how to fix this problem particularly, but luckily I am able to use the Squarespace social links widget in the footer so that they won't affect each other any more hopefully.