<a> tags in my code block aren't becoming clickable links

Hi, 

I created a custom codeblock to display an icon menu on my client's website, but for some reason when I copy the code into the Squarespace code block and save, the links aren't clickable, and just the icons display, but don't lead anywhere.

I've tried testing in a new code block elsewhere on the page, and it seems like no <a> tags with an href inside of them, regardless of what is inside of the <a>, wether it is text or icon or photo. I've also tested my code in VScode and my browser and it displays and works perfectly fine..... IDK if this is a forum question or more of a Squarespace glitch, but here I am. 

Attached is a photo of the (unclickable) menu, as you can see, it displays fine. Below is my code:

<script src="https://kit.fontawesome.com/227f70ae87.js" crossorigin="anonymous"></script> 
<ul class="t-social">
    <!-- Apple Pod -->
  <li>
    <a href="https://podcasts.apple.com/us/podcast/the-managing-with-mind-and-heart-podcast/id1463442752" class="fa-solid fa-podcast">
    </a>
  </li>
  
    <!-- Spotify -->
  <li>
    <a href="https://open.spotify.com/show/5tHe85vgYJ4Jd6yo7SE9oi" class="fa-brands fa-spotify">
    </a>
  </li>
    <!-- Youtube -->
  <li>
    <a href="https://www.youtube.com/channel/UCkrJTszURtFU6l0nJak28CQ/videos" class="fa-brands fa-youtube">
    </a>
  </li>
    <!-- Soundcloud -->
  <li>
    <a href="https://soundcloud.com/user-352787341" class="fa-brands fa-soundcloud">
    </a>
  </li>
</ul>


<style>
  /* code block padding top bottom */
  .code-block {
    padding-top: 2;
    padding-bottom: 2;
}
  /* social icons code */
.t-social {
    display: block;
    margin: 0 auto;
    padding-top: 15px;
    text-align: center;
      padding-left: 0;
    padding-bottom: 10px; 
}
  .t-social li {
  display: inline-block;
    margin: 0;
    line-height: 100%!important;
  }
  .t-social li a {
    font-size: 40px;
    margin: 0 20px;
    color: #479394;
    text-decoration: none; 
}
</style>

Please post the URL for a page on your site where we can see your issue. For us to see the URL you need to include the link in the content of your post. The URL field the forum software provides is not shown to us.

A link to the backend of the your site won’t work for us, i.e. a URL that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

You may find How to post a forum question post useful.

We can then take a look at your issue.

I see you removed some tags from original code, the code should be

<script src="https://kit.fontawesome.com/227f70ae87.js" crossorigin="anonymous"></script> 
<ul class="t-social">
    <!-- Apple Pod -->
  <li>
    <a href="https://podcasts.apple.com/us/podcast/the-managing-with-mind-and-heart-podcast/id1463442752" target="_blank">
      <i class="fa-solid fa-podcast"></i>
    </a>
  </li>
  
    <!-- Spotify -->
  <li>
    <a href="https://open.spotify.com/show/5tHe85vgYJ4Jd6yo7SE9oi" target="_blank">
      <i class="fa-brands fa-spotify"></i>
    </a>
  </li>
    <!-- Youtube -->
  <li>
    <a href="https://www.youtube.com/channel/UCkrJTszURtFU6l0nJak28CQ/videos" target="_blank">
      <i class="fa-brands fa-youtube"></i>
    </a>
  </li>
    <!-- Soundcloud -->
  <li>
    <a href="https://soundcloud.com/user-352787341" target="_blank">
      <i class="fa-brands fa-soundcloud"></i>
    </a>
  </li>
</ul>


<style>
  /* code block padding top bottom */
  .code-block {
    padding-top: 2;
    padding-bottom: 2;
}
  /* social icons code */
.t-social {
    display: block;
    margin: 0 auto;
    padding-top: 15px;
    text-align: center;
      padding-left: 0;
    padding-bottom: 10px; 
}
  .t-social li {
  display: inline-block;
    margin: 0;
    line-height: 100%!important;
  }
  .t-social li a {
    font-size: 40px;
    margin: 0 20px;
    color: #479394;
    text-decoration: none; 
}
</style>