如何对齐侧边栏导航无序列表项与不同尺寸的左侧图标

我在侧边栏导航中设置了一个无序列表，在列表项左侧添加了图标，但由于图标尺寸不同，导致列表项左侧无法对齐，当前实现效果如下：

我想要实现的预期对齐效果如下：

相关代码如下，HTML包含ASP.Net MVC元素：

<div class="wrapper">
    <div class="sidebar text-light bg-primary-darker">
        <ul>
            <li><a asp-action="Info" asp-controller="Dashboard"><i class="fas fa-home"></i>Home</a></li>
            <li><a asp-action="Invoices" asp-controller="Dashboard"><i class="fas fa-file-invoice-dollar"></i>Invoices</a></li>
            <li><a asp-action="Customers" asp-controller="Dashboard"><i class="fas fa-user-friends"></i>Customers</a></li>
            <li><a asp-action="Settings" asp-controller="Dashboard"><i class="fas fa-cog"></i>Settings</a></li>
        </ul>
    </div>
</div>

CSS代码如下：

.wrapper {
  margin-top: -1px;
  position: relative;
  z-index: 1;
}

.wrapper .sidebar {
  position: fixed;
  width: 15%;
  height: 100%;
  background-color: #016fe6;
  padding: 50px 0;
  font-size: 22px;
}

.wrapper .sidebar ul {
  display: flex;
  flex-direction: column;
  padding-inline-start: 10px;
}

.wrapper .sidebar li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  list-style-type: none;
  margin: 10px;
  height: 100%;
}

.wrapper .sidebar li a {
  text-decoration: none;
  display: block;
  color: #fff;
  padding-left: 15px;
}

.wrapper .sidebar li a i {
  margin-right: 15px;
}

.wrapper .sidebar li a:hover{
  color: rgb(189, 204, 204);
}

当前项目同时使用了Bootstrap 4框架。

方案1：使用Font Awesome内置类（操作最简） #

你用的Font Awesome图标库自带fa-fw固定宽度类，直接给所有<i>标签添加该类即可自动对齐图标，无需额外写CSS，修改后的HTML示例：

<li><a asp-action="Info" asp-controller="Dashboard"><i class="fas fa-home fa-fw"></i>Home</a></li>

所有导航项的图标都加上fa-fw类即可生效。

方案2：自定义CSS固定图标宽度 #

如果不想修改HTML标签，直接添加如下CSS规则即可：

.wrapper .sidebar li a i {
  width: 24px; /* 可根据实际需求调整宽度值 */
  text-align: center;
}

给图标设置固定宽度后，所有图标占位宽度一致，后面的文字自然对齐。

方案3：配合Bootstrap 4 flex布局优化（适配性更强） #

修改链接的布局规则，同时实现图标文字垂直居中和水平对齐：

.wrapper .sidebar li a {
  display: flex;
  align-items: center;
}
.wrapper .sidebar li a i {
  flex: 0 0 24px; /* 固定图标宽度，不随布局缩放 */
  text-align: center;
  margin-right: 15px;
}

该方案适配不同字号、行高的场景，对齐效果更稳定。

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