html - 将 Font awesome 和文本向左对齐

Question

我试图将我的图标和文本向左对齐，但看起来有点乱

我的代码非常简单:

<p class="text-muted mb-2 text-left">22/8 <i class="fa fa-calendar-alt fa-1x"></i>
<br>21:00 <i class="fa fa-clock fa-1x"></i>
<br>Herzeliya <i class="fa fa-map-marker-alt fa-1x"></i>
<br>Texy <i class="fa fa-home fa-1x"></i>
<br>

谁能帮我把它们向左对齐？

Answer 1

需要按照最宽的宽度来设置图标的容器宽度。

<div class="container mt-3">
    <div class="row">
        <div class="col-12">
            <p class="text-muted mb-2 text-left">
                <i class="fa fa-calendar-alt fa-1x fa-custom-width mr-2"></i>22/8
                <br>
                <i class="fa fa-clock fa-1x fa-custom-width mr-2"></i>21:00
                <br>
                <i class="fa fa-map-marker-alt fa-1x fa-custom-width mr-2"></i>Herzeliya
                <br>
                <i class="fa fa-home fa-1x fa-custom-width mr-2"></i>Texy
                <br>
            </p>
        </div>
    </div>
</div>

.fa-custom-width{
    width: 18px;
    text-align: center;
}

https://www.codeply.com/go/GQAdPupsFU