如何在无序列表中并排显示两个Font Awesome图标

问题出在fa-li类的默认样式上——它是绝对定位的，所有带这个类的元素都会被定位到列表项的同一个左侧位置，所以两个图标会重叠。下面是几种可行的解决方法：

方法1：自定义图标容器（推荐，更灵活） #

放弃使用fa-li，用一个容器包裹两个图标，自己控制布局和间距：

<ul class="custom-icon-list">
    <li>
        <span class="icon-pair">
            <i class="fa-solid fa-a"></i>
            <i class="fa-solid fa-1"></i>
        </span>
        List item
    </li>
</ul>

对应的CSS：

/* 去掉默认列表样式 */
.custom-icon-list {
    list-style: none;
    padding-left: 0;
}

/* 控制图标组的布局 */
.icon-pair {
    display: inline-flex;
    gap: 6px; /* 两个图标之间的间距 */
    margin-right: 10px; /* 图标和文字之间的间距 */
    align-items: center; /* 垂直居中对齐 */
}

方法2：调整第二个图标的定位 #

保留fa-ul和fa-li，通过CSS偏移第二个图标的位置：

<ul class="fa-ul">
    <li>
        <i class="fa-li fa-solid fa-a"></i>
        <i class="fa-li fa-solid fa-1 icon-shift"></i>
        List item
    </li>
</ul>

对应的CSS：

.icon-shift {
    /* 用transform平移，避免硬编码数值 */
    transform: translateX(100%);
    /* 如果需要更精确的控制，也可以直接调整left值：
    left: 0; 默认fa-li的left是-1.2em，这里改成0就能移到第一个图标右侧 */
}

/* 可选：如果图标整体太靠左，调整ul的内边距 */
.fa-ul {
    padding-left: 3em; /* 默认是2.5em，适当增大给两个图标留出空间 */
}

方法3：利用列表项的padding区域定位图标 #

给列表项设置padding，把图标绝对定位在padding区域内：

<ul class="positioned-icon-list">
    <li>
        <i class="fa-solid fa-a"></i>
        <i class="fa-solid fa-1"></i>
        List item
    </li>
</ul>

对应的CSS：

.positioned-icon-list li {
    position: relative;
    padding-left: 3em; /* 给两个图标留出左侧空间 */
    list-style: none;
}

.positioned-icon-list li i {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* 垂直居中 */
}

/* 第二个图标偏移到第一个右侧 */
.positioned-icon-list li i:last-of-type {
    left: 1.2em; /* 和fa-li默认的宽度对应 */
}

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