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

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 >
  <a href="tel: XXXXXXXX" ><i ></i></a>
  <a href="https://wa.me/ XXXXXXXXXX" ><i ></i></a>
  <a href="mailto:[email protected]" ><i ></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.

CodePudding user response：

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 ></i>

Font-Awesome 6

<i ></i>

CodePudding user response：

I don't see any problem in the code you show, maybe with more code we can see