Question

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

我已经尝试过的来源：

why some of the font-awesome icons does not show

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

在样式表中，我正在使用来自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图标是Stream documentStream = EnvelopesApi.GetDocument(accountId, envelopeId, documentId);标签的子元素，并且链接设置为与背景相同的绿色：

将字体颜色设置为白色。

<a>

为什么我的锚中不显示“真棒字体”图标？

1 个答案: