How do I fix a sticky social icon that is not showing?

I am making my icons sticky. It's working perfectly in the index.html, however, the WhatsApp icon is not showing on other pages. I have tried to add a z-index in case it is hiding behind some other page elements but that hasn't worked out.

What else can I do?

My html:

<!-- Sticky social media icon bar -->
<div class="icon-bar">
  <a href="tel:+XXXXXXXX" class="facebook"><i class="fa fa-phone"></i></a>
  <a href="https://wa.me/+XXXXXXXXXX" class="google"><i class="fa fa-whatsapp"></i></a>
  <a href="mailto:[email protected]" class="twitter"><i class="fa fa-envelope"></i></a>  
</div>

My css code:

 /* Style for sticky icon bar links */
      .icon-bar a {
        display: block;
        text-align: center;
        padding: 14px;
        transition: all 0.3s ease;
        color: white;
        font-size: 20px;
        z-index: 10;
      }
      
      /* Style the social media icons with color, if you want */
      .icon-bar a:hover {
        background-color: #000;
      }
      
      .facebook {
        background: #3B5998;
        color: white;
      }
      
      .twitter {
        background: #dd4b39;
        color: white;
      }
      
      .google {
        background: #55ACcE;
        color: white;
      }
      
      .linkedin {
        background: #007bb5;
        color: white;
      }
      
      .youtube {
        background: #bb0000;
        color: white;
      }

Thanks.

Solution

Depending on which version of Font-Awesome you are using you may need to use fab or fa-brands instead of fa.

Font-Awesome 5 (I think!)

<i class="fab fa-whatsapp"></i>

Font-Awesome 6

<i class="fa-brands fa-whatsapp"></i>