在水平列表中使用 Font Awesome 图标

Question

我正在构建一个网站，我想要一个包含三个 Font Awesome 图标的水平列表 - 登录、收藏和购物车看起来像这样，其中的单词被图标替换：

但是，使用 Font Awesome 推荐的代码：

   <div class="siteicons" >
                    <ul class="fa-ul">
                          <li><span class="fa-li"><i class="fas fa-sign-in fa-lg"></i></span></li>
                          <li><span class="fa-li"><i class="fas fa-heart-in fa-lg"></i></span></li>
                          <li><span class="fa-li"><i class="fas fa-shopping-cart fa-lg"></i></span></li>
                    </ul>
                </div>

只会显示最终的图标：

相关元素的 CSS 是：

.siteicons {
    grid-area: icons;
    justify-self: stretch;
    align-self: center;
}

.siteicons ul {
    display: grid;
    grid-template-columns: repeat(3,22vw);
}

.siteicons li {
    /* No bullets */
    text-align: left;
    list-style-type: none;
}

据我了解，图标应该以文本的方式显示，但这显然没有发生。

请问大家有什么建议吗？

一切顺利，

德莫特

Answer 1

您好 问题是您使用的图标类在您使用的版本中不存在。查看具有有效类的示例：

.siteicons {
    grid-area: icons;
    justify-self: stretch;
    align-self: center;
}

.siteicons ul {
    display: grid;
    grid-template-columns: repeat(3,22vw);
}

.siteicons li {
    /* No bullets */
    text-align: left;
    list-style-type: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>

 <div class="siteicons" >
                    <ul class="fa-ul">
                          <li><span class="fa-li"><i class="fas fa-sign-in-alt fa-lg"></i></span></li>
                          <li><span class="fa-li"><i class="fas fa-heart fa-lg"></i></span></li>
                          <li><span class="fa-li"><i class="fas fa-shopping-cart fa-lg"></i></span></li>
                    </ul>
                </div>