Bootstrap 5 List Group添加超大Font Awesome图标溢出问题求助

你的问题核心是绝对定位的图标没有相对正确的父元素定位，同时父容器未处理溢出或预留空间。以下是修复方案：

1. 为列表项设置相对定位 #

给包含图标的list-group-item添加position: relative，让绝对定位的图标以当前列表项为基准定位，避免脱离容器乱跑。

方案A（现代浏览器支持） #

用:has()选择器自动匹配带图标的列表项：

.list-group-item:has(.pages-icon) {
  position: relative;
  /* 若要图标不超出列表项边界，添加此行；若要图标部分超出做视觉效果则删除 */
  overflow: hidden;
  /* 可选：给右侧/顶部加内边距，避免文字被图标遮挡 */
  padding-right: 80px;
  padding-top: 30px;
}

方案B（兼容旧浏览器） #

给带图标的列表项加自定义类（比如has-icon）：

.has-icon {
  position: relative;
  overflow: hidden;
  padding-right: 80px;
  padding-top: 30px;
}

对应HTML修改：

<a href="#" class="list-group-item list-group-item-action w-100 has-icon">
  <span class="pages-icon"><i class="fa-thin fa-people-group text-cpPink"></i></span> Our People
</a>

2. 微调图标位置（可选） #

根据视觉需求调整图标偏移量，让显示更协调：

.pages-icon {
  font-size: 90px;
  position: absolute;
  right: -15px; /* 微调右侧距离，避免完全贴边 */
  top: -10px; /* 调整顶部偏移 */
  transform: rotate(11.81deg);
  /* 现在z-index可正常生效，比如让图标在文字下方 */
  z-index: 0;
}

3. 确保文字不被遮挡 #

通过给列表项增加右侧内边距，让文字和图标保持合理间距，避免覆盖。

完成后，图标会相对当前列表项定位，溢出问题解决，z-index也能正常发挥作用。

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