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

Question

我正在构建一个网站，我想要一个包含三个 Font Awesome 图标的水平列表 - log-in、收藏夹和购物车，看起来像这样，用图标替换了文字：

但是，使用 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>

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

Using Font Awesomne icons in horizontal list

html

css

icons

font-awesome