使用不同尺寸Font Awesome图标时的列表项对齐问题

我需要列出某公司的全部联系方式，使用了Font Awesome的不同图标，但这些图标宽度不一致。请问如何让所有文本实现正确的左对齐？我已通过flex布局实现了多行文本的换行对齐，且显示区域宽度限制为230px。

核心思路是给每个图标分配固定宽度，让它们占据相同的横向空间，这样文本就能整齐左对齐了。修改后的代码如下：

修改后的CSS #

body {
  font-family: Arial, Helvetica, sans-serif;
}

ul.ContactUs {
  list-style-type: none;
  padding-left: 25px; /* 给图标预留固定空间，替代原来的负margin，布局更稳定 */
  display: flex;
  flex-direction: column;
}

ul.ContactUs li {
  display: flex;
  padding: 4px 0;
  color: black;
  align-items: flex-start; /* 保证多行文本和图标顶部对齐 */
}

ul.ContactUs li:before {
  font-family: 'FontAwesome';
  content: '\f067';
  width: 20px; /* 固定图标宽度，可根据实际图标大小微调 */
  margin-right: 11px; /* 图标和文本的间距 */
  text-align: center; /* 图标在固定宽度内居中，视觉更整齐 */
}

ul.ContactUs li.address:before {
  content: '\f60e';
}

ul.ContactUs li.phone:before {
  content: '\f879';
}

ul.ContactUs li.mobile:before {
  content: '\f3cd';
}

ul.ContactUs li.email:before {
  content: '\f0e0';
}

对应的HTML（结构不变，保持原有语义） #

<!--Fontawesome  -->
<script src="https://kit.fontawesome.com/d2ee99dc46.js" crossorigin="anonymous"></script>
<div style="width: 230px; border: 1px solid black;">
  <h4>Contact Us</h4>
  <ul class="ContactUs">
    <li class="address">63 Street name,
      Azaadville,
      Johannesburg,
      South Africa,
      1754</li>
    <li class="phone">011 768 3415</li>
    <li class="mobile">082 554 0050</li>
    <li class="email">Hello(at) Companyname.co.za</li>
  </ul>
</div>

关键调整说明 #

• 给ul设置固定左内边距，替代之前li:before的负margin，避免布局偏移
• 给每个图标伪元素设置固定宽度，确保不同宽度的图标占据相同横向空间
• 图标伪元素设置居中对齐，让不同大小的图标视觉上更协调
• 列表项设置顶部对齐，确保多行地址文本和图标顶端对齐，避免垂直错位

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