如何修复Font Awesome图标作为列表项时的文本缩进对齐问题？

嘿，这个文本对齐的问题我太熟了！你现在的问题根源是：图标和文本都是行内元素，换行后文本会默认从容器左边缘开始，而不是和第一行的文本开头对齐。给你几个简单靠谱的解决方案，直接就能用上：

方案1：Flexbox布局（推荐，现代浏览器友好） #

这种方法代码简洁，容易维护，还能轻松控制图标和文本的间距：

修改后的CSS： #

/* 给包裹图标和文本的p标签添加这个类 */
.f_item_container {
  display: flex;
  align-items: flex-start; /* 让图标和文本顶部对齐 */
  gap: 0.6rem; /* 图标和文本之间的间距，可根据需求调整 */
}
.f_item_tick {
  color: #00a885;
  font-size: 1.8rem;
  margin-top: 0.2rem; /* 可选，微调图标垂直位置，让它和文本更居中 */
}

修改后的HTML： #

<p class="f_item_container">
  <i class="f_item_tick fa fa-check"></i> 
  No upfront payment is required to access the solution. A Nominee and Supervisory fee are both payable once the solution is active. These are taken from the monthly contributions you pay into.
</p>

方案2：绝对定位法（兼容性更好，适合老浏览器） #

如果需要兼容IE这类老浏览器，用绝对定位的方法更稳妥：

修改后的CSS： #

.f_item_container {
  position: relative;
  padding-left: 2.5rem; /* 预留图标位置，数值要大于图标宽度（1.8rem）+ 间距 */
  line-height: 1.6; /* 可选，优化文本行高，让对齐更美观 */
}
.f_item_tick {
  color: #00a885;
  font-size: 1.8rem;
  position: absolute;
  left: 0;
  top: 0.2rem; /* 微调垂直位置，和文本对齐 */
}

修改后的HTML和方案1一致，只需给p标签加上f_item_container类即可。 #

小提示 #

• 两种方案都不需要改动你原有的图标样式，只需要新增容器的CSS类即可。
• 可以根据你的设计需求，调整gap、padding-left或者margin-top的数值，让对齐效果更完美。

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