Adding floating social icons with vertical text

Site URL: https://duck-reindeer-bbak.squarespace.com

Hello,

Does anyone know how to add floating social icons with vertical text? I'm trying recreate the social links with the vertical "Follow Us" text and vertical line that is on the left side of this website: https://www.golivehq.co

My website: https://duck-reindeer-bbak.squarespace.com

Password: blow

Thank you!

They used this code into Code Block

<div class="left-sidebar">
  <ul>
    <li>Follow Us</li>
    <li><a target="_blank" href="https://www.facebook.com/golivehq" tabindex="0"><i class="fa fa-facebook"></i></a></li>
<li><a target="_blank" href="http://instagram.com/golivehq" tabindex="0"><i class="fa fa-instagram"></i></a></li>
<li><a target="_blank" href="https://twitter.com/golivehq" tabindex="0"><i class="fa fa-twitter"></i></a></li>
<li><a target="_blank" href="https://www.pinterest.com/golivehq/" tabindex="0"><i class="fa fa-pinterest"></i></a></li>
  </ul>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
  .left-sidebar {
    position: fixed;
    bottom: 36%;
    left: 3.2%;
    z-index: 999;
    width: 15px;
}
  .left-sidebar ul, .right-sidebar ul {
    margin: 0;
    padding: 0;
}
  .left-sidebar ul li:first-child {
    transform: rotate(-270deg);
    width: 120px;
    transform-origin: 41px -20px;
    text-transform: uppercase;
    font-size: 12px;
    margin: 0;
    letter-spacing: 1px;
    font-family: 'Gilmer-Regular';
}
  .left-sidebar ul li:nth-child(2):before {
    content: "";
    width: 1px;
    height: 50px;
    background: #000;
    margin: 0 auto 15px;
    display: block;
}
  .left-sidebar ul li a, .right-sidebar ul li a {
    color: #000;
    transition: all .2s ease-in-out;
}
  
</style>