将字体真棒和文本向左对齐

Posted 2023-03-06

【中文标题】将字体真棒和文本向左对齐

【英文标题】：Align Font awesome and text to left

【发布时间】：2018-10-08 10:39:49

【问题描述】：

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

我的代码很简单：

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

谁能帮我把它们左对齐？

【问题讨论】：

寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Complete, and Verifiable example

“有点乱”是什么意思？...另外，关闭段落

【参考方案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

【参考方案2】：

只需使用 fa-fw 类（包含在 Font Awesome 中）...

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

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