如何使Font Awesome图标与文本整齐左对齐？

嘿，我来帮你搞定这个图标和文本对齐的问题！你现在的写法只是简单把文本和图标放在同一行后换行，因为每行文本的长度不一样，图标自然就没法整齐对齐了。这里有几个实用的解决方案，你可以根据自己的需求选：

方案1：用Flexbox（推荐，现代布局方式） #

给每一行的文本和图标套一个弹性容器，再给文本部分设置固定最小宽度，这样所有图标就会乖乖对齐在同一垂直线上：

<div class="text-muted mb-2 d-flex align-items-center">
  <span style="min-width: 70px;">22/8</span>
  <i class="fa fa-calendar-alt fa-1x"></i>
</div>
<div class="text-muted mb-2 d-flex align-items-center">
  <span style="min-width: 70px;">21:00</span>
  <i class="fa fa-clock fa-1x"></i>
</div>
<div class="text-muted mb-2 d-flex align-items-center">
  <span style="min-width: 70px;">Herzeliya</span>
  <i class="fa fa-map-marker-alt fa-1x"></i>
</div>
<div class="text-muted mb-2 d-flex align-items-center">
  <span style="min-width: 70px;">Texy</span>
  <i class="fa fa-home fa-1x"></i>
</div>

d-flex和align-items-center是Bootstrap的类，能让文本和图标垂直居中，你可以根据实际文本长度调整min-width的数值，确保最长的文本也能放下。

方案2：用Bootstrap网格系统（如果你已经在用Bootstrap） #

利用Bootstrap的行和列来分配空间，这样不仅对齐整齐，还自带响应式效果：

<div class="text-muted mb-2 row align-items-center">
  <div class="col-4">22/8</div>
  <div class="col-auto"><i class="fa fa-calendar-alt fa-1x"></i></div>
</div>
<div class="text-muted mb-2 row align-items-center">
  <div class="col-4">21:00</div>
  <div class="col-auto"><i class="fa fa-clock fa-1x"></i></div>
</div>
<div class="text-muted mb-2 row align-items-center">
  <div class="col-4">Herzeliya</div>
  <div class="col-auto"><i class="fa fa-map-marker-alt fa-1x"></i></div>
</div>
<div class="text-muted mb-2 row align-items-center">
  <div class="col-4">Texy</div>
  <div class="col-auto"><i class="fa fa-home fa-1x"></i></div>
</div>

col-4给文本部分分配了1/3的宽度，col-auto让图标列自适应宽度，你可以根据布局调整col-*的数值。

方案3：用CSS Grid #

如果喜欢更简洁的结构，用Grid布局也很方便，把所有项放在一个Grid容器里，定义两列即可：

<div class="text-muted" style="display: grid; grid-template-columns: auto 24px; gap: 10px;">
  <div>22/8</div>
  <i class="fa fa-calendar-alt fa-1x"></i>
  <div>21:00</div>
  <i class="fa fa-clock fa-1x"></i>
  <div>Herzeliya</div>
  <i class="fa fa-map-marker-alt fa-1x"></i>
  <div>Texy</div>
  <i class="fa fa-home fa-1x"></i>
</div>

第一列自适应文本宽度，第二列固定图标宽度，gap用来设置文本和图标之间的间距，整体对齐效果非常规整。

另外提个小细节：如果你的Font Awesome版本是6.x，fa-clock可能需要改成fa-solid fa-clock才能正常显示图标，这个要根据你引入的版本调整哦！

内容的提问来源于stack exchange，提问作者mordehi chro