Html 将字体和文本向左对齐

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

我的代码非常简单：

<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>

22/8

21:00

赫泽利娅

特西

---

有人能帮我把它们左对齐吗？

有必要根据最宽图标的宽度设置图标的容器宽度

<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;
}

22/8


21:00


赫泽利娅


特西



.fa自定义宽度{
宽度：18px；
文本对齐：居中；
}

---

只需使用

fa-fw

类（包含在Font Aowesome中）

22/8

21:00

赫泽利娅

特西

---

寻求代码帮助的问题必须包含在问题本身中重现代码所需的最短代码，最好是以最短的格式。看到“有点乱”是什么意思了吗？…还有，结束这段

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