html - 为什么 Font Awesome 图标不显示在我的 anchor 中？

Question

我知道我的问题是否看起来很奇怪，但我在使用 fontawesome 时发现了一个奇怪的行为，通常它总是在我使用它时出现并且我已经阅读了 Docs我在这里读到的一些答案并没有解决我的问题

我已经尝试过的来源:

FontAwesome icons not showing. Why?

why some of the font-awesome icons does not show

Font awesome is not showing icon

里面的所有答案都不能解决我的问题。

在样式表中我使用了来自 fontawesome 的外部链接

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

这就是我要展示的内容:

<div id="whatsapp-go"><a target="_blank" href="#"><i class="fab fa-whatsapp"></i></a></div>

<div id="back-to-top"><i class="fas fa-arrow-up"></i></div>

唯一出现的是箭头，但没有 whatsapp 图标

image of the icon doesn't show up

但是当我在另一个元素中使用它时它显示没有任何问题

Icon shows without problem

这里是显示图标的代码:

<ul class="footer-follow">
    <li>
        <a class="icon-color btn-floating btn-sm mx-1" target="_blank" href="#"><i class="fa fa-envelope-square fa-2x" alt="#"></i></a>
    </li>
    <li>
        <a class="icon-color btn-floating btn-sm mx-1" target="_blank" href="#"><i class="fab fa-whatsapp fa-2x"></i></a>
    </li>
    <li>
        <a class="icon-color btn-floating btn-sm mx-1" target="_blank" href="#"><i class="fab fa-instagram fa-2x"> </i></a>
    </li>
    <li>
        <a class="icon-color btn-floating btn-sm mx-1" target="_blank" href="#"><i class="fab fa-linkedin fa-2x"></i></a>
    </li>
    <li>
        <a class="icon-color btn-floating btn-sm mx-1" target="_blank" href="#"><i class="fab fa-youtube fa-2x"></i></a>
    </li>
</ul>

有人可以帮我吗？

CSS 文件:

/*------------------------------------*\
    Back to top
\*------------------------------------*/

#back-to-top {
    display:block;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #0bb89e;
    border-radius:50px;
    color: #FFF;
    z-index: 9999;
    -webkit-transition: 0.2s opacity;
    transition: 0.2s opacity;
    cursor: pointer;
}

#back-to-top:hover {
    opacity: 0.8;
}


/*------------------------------------*\
    Whatsapp-go
\*------------------------------------*/

#whatsapp-go {
    display:block;
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #0bb89e;
    border-radius:50px;
    color: #FFF;
    z-index: 9999;
    -webkit-transition: 0.2s opacity;
    transition: 0.2s opacity;
    cursor: pointer;
}

#whatsapp-go:hover {
  opacity: 0.8;
}

Answer 1

就在那里，只是 whatsapp 图标是 <a> 的子图标标记和链接设置为与背景相同的绿色:

设置字体颜色为白色。

#whatsapp-go a {
  color: white;
}