我正在使我的圖示變粘。它在 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:[email protected]" 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;
}
謝謝。
uj5u.com熱心網友回復：
根據您使用的 Font-Awesome 版本，您可能需要使用fab或fa-brands代替fa.
Font-Awesome 5 （我認為！）
<i class="fab fa-whatsapp"></i>
字體-Awesome 6
<i class="fa-brands fa-whatsapp"></i>
uj5u.com熱心網友回復：
我在您顯示的代碼中沒有看到任何問題，也許我們可以看到更多代碼
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/447924.html
上一篇：復選框懸停在錯誤的標簽上
下一篇：從引導程式中獲取的導航欄沒有折疊