如何修复未显示的粘性社交图标？

Question

我正在让我的图标变粘。它在 index.html 中运行良好，但是 WhatsApp 图标未显示在其他页面上。我试图添加一个 z-index 以防它隐藏在其他一些页面元素后面，但没有成功。

我还能做什么？

我的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:myemail@gmail.com" class="twitter"><i class="fa fa-envelope"></i></a>  
</div>

我的css代码：

 /* 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;
      }

谢谢。

Answer 1

根据您使用的 Font-Awesome 版本，您可能需要使用 fab 或 fa-brands 而不是 fa。

Font-Awesome 5 （我觉得！）

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

Font-Awesome 6

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

Answer 2

我在您显示的代码中没有发现任何问题，也许我们可以看到更多代码

如何修复未显示的粘性社交图标？

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

html

css

icons

sticky