显示字体真棒而不是 IMG答案

【问题标题】：Display Font Awesome Instead of IMG显示字体真棒而不是 IMG
【发布时间】：2021-12-06 06:01:44
【问题描述】：

我只想在事件时间轴中显示 Font Awesome 图标而不是图像。我用 .fa 替换了 3 个张贴的 IMG 区域 - 但是这似乎不正确。我该如何做我想做的事？谢谢！ :--)

.event-timeline ul li .single-event .fa {
    height: 80px;
    width: 80px;
    float: left;
    border-radius: 50%;
    margin-right: 15px;
    margin-top: 10px;
}

.event-timeline ul li:nth-child(2n+1) .single-event .fa {
    float: right;
    margin-right: 0;
    margin-left: 15px;
}

.event-timeline ul li .single-event img {
    height: 80px;
    width: 80px;
    float: left;
    border-radius: 50%;
    margin-right: 15px;
    margin-top: 10px;
}

.event-timeline ul li:nth-child(2n+1) .single-event img {
    float: right;
    margin-right: 0;
    margin-left: 15px;
}

.event-timeline ul li:nth-child(2n+1) .single-event img {
        float: left;
        margin-right: 15px;
        margin-left: 0;
    }
    
    .event-timeline ul li:nth-child(2n+1) .single-event .fa {
        float: left;
        margin-right: 15px;
        margin-left: 0;
    }

<li><div class="single-event">
 
 <img src="assets/images/UCF-SIGN-IN.png" height="500" alt="event speaker">
 
 <i class="fas fa-sign-in-alt fa-4x" aria-hidden="true"></i>
 
 <p class="event-time">10:00 AM - 10:00 PM</p> <h3>REGISTRATION</h3> <h3>UCF STAFF,</h3> <span>VARIOUS</span>
 
 </div></li>

【问题讨论】：

请添加您的 HTML。在不知道如何用 fa 图标替换 img 元素的情况下，无法确定需要做什么。
您的问题中似乎没有任何 HTML。不要把它放在 cmets 中，请做一个 sn-p 我们可以自己运行看看问题。
我在这个线程中编辑了开始帖子。 :--)

标签： html css icons

【解决方案1】：

css 中的.fa 应该是正确的。

【讨论】：

那么，将 .event-timeline ul li .single-event fa 更改为 .event-timeline ul li .single-event .fa ？那也没有做任何事情。 :--)
在此处添加 HTML 和 CSS 代码
我在这个线程中编辑了原始问题。 :--)