FontAwesome Social Media Links Code

Site URL: https://imnworld.squarespace.com/artists/kathy-mattea

I signed up with FontAwesome because I needed to have social media links for different pages. Can anyone help with the following: when I have more than five social media links, the sixth one goes to a second line. I would like to have these in just one line as there is plenty of room. Following is the page link, password and the code I am using. Thanks in advance.

https://imnworld.squarespace.com/artists/kathy-mattea

 

PASSWORD IS:  password

 

<script src="https://kit.fontawesome.com/29b7f821e9.js" crossorigin="anonymous"></script>

 

<!-- OPTION 1: Icons in a link -->

 

<ul class="t-social">

  <li>

    <!-- put a unique class like "icon-link" on any link you are using an icon -->

<a class="icon-link" href="https://www.mattea.com" target="_blank">

  <i class="fa-solid fa-tv" title=""></i>

</a>

  </li>

  <li>

    <a class="icon-link" href=https://open.spotify.com/artist/7ndzHjxbErIwvwnEUewMWe?si=vvjVwuSjQC-9PHUkC73lmA" target="_blank">

      <i class="fa-brands fa-spotify" title=""></i>

    </a>

  </li>

  <li>

    <a class="icon-link" href="https://www.facebook.com/KathyMatteaMusic" target="_blank">

      <i class="fa-brands fa-facebook-f" title=""></i>

    </a>

  </li>

  <li>

    <a class="icon-link" href="https://www.instagram.com/kathymattea" target="_blank">

      <i class="fa-brands fa-instagram" title=""></i>

    </a>

  </li>

  <li>

    <a class="icon-link" href="https://twitter.com/Kathymattea09" target="_blank">

      <i class="fa-brands fa-twitter" title=""></i>

    </a>

  </li>

  </li>

    <a class="icon-link" href="http://www.youtube.com/user/kathymattea" target="_blank">

      <i class="fa-brands fa-youtube title="”></i>

    </a>

  </li>

  <li>

 

</ul>

 

<style>

  /* 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 .icon-link {

    font-size: 24px; /* change the font-size to change the icon size */

    display: block;

    margin: 0 10px; /* increase/decrease the margin to adjust icon spacing */

    color: #000000;

  }

 

  .t-social .icon-link:hover {

    color: #000000;

  }

</style>

I see 6 icons same line here. Did you solve it?

Yes I did - I had a little glitch before the YouTube icon. Thank you tuanphan.