如何对齐Bootstrap 4.6.2中无序列表里不同尺寸的FontAwesome图标？

针对你遇到的图标垂直不对齐、圆形图标偏右的问题，有两种可行的解决思路：

方法一：利用Bootstrap Flex布局替代FontAwesome列表类 #

放弃使用FontAwesome的fa-ul和fa-li，改用Bootstrap的flex布局类实现对齐，这种方式更直观且兼容性好：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>

<ul class="list-unstyled">
  <li class="d-flex align-items-center mb-2">
    <i class="fa fa-star fa-sm mr-2" style="font-size: 0.8em;"></i>
    <a href="#">Link 1</a>
  </li>
  <li class="d-flex align-items-center">
    <i class="fas fa-circle fa-sm mr-2" style="font-size: 0.44em;"></i>
    <a href="#">Link 2</a>
  </li>
</ul>

关键说明： #

• list-unstyled：移除默认列表的内边距和项目符号
• d-flex：将列表项设为flex容器
• align-items-center：让容器内的图标和文本垂直居中对齐
• mr-2：给图标添加右侧间距，避免与文本紧贴

方法二：修正FontAwesome列表类的样式 #

如果坚持使用fa-ul和fa-li，可以通过自定义CSS修正定位和对齐：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>

<style>
/* 调整fa-li的默认定位和对齐 */
.fa-ul .fa-li {
  left: -1.7em; /* 缩小默认left偏移量，适配小图标 */
  text-align: left; /* 取消图标居中，避免小图标视觉偏右 */
  top: 0.1em; /* 微调垂直位置，对齐文本基线 */
}

/* 针对圆形小图标额外微调 */
.fa-ul .fa-li.fas.fa-circle {
  left: -1.4em;
  top: 0.3em; /* 进一步上移，和文本垂直居中 */
}

/* 确保图标和文本垂直对齐 */
.fa-ul .fa-li,
.fa-ul a {
  vertical-align: middle;
}
</style>

<ul class="fa-ul">
  <li>
    <i class="fa-li fa fa-star fa-sm" style="font-size: 0.8em;"></i>
    <a href="#">Link 1</a>
  </li>
  <li>
    <i class="fa-li fas fa-circle fa-sm" style="font-size: 0.44em;"></i>
    <a href="#">Link 2</a>
  </li>
</ul>

问题根源： #

FontAwesome的fa-li默认设置了width: 2em和text-align: center，当图标尺寸缩小后，图标会在2em宽的容器内居中，导致视觉上偏右；同时默认的top偏移量没有适配小图标的垂直对齐需求，因此会出现位置偏高的问题。

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