如何在Bootstrap项目中给图片叠加FontAwesome播放图标并居中对齐

调整说明 #

• 首先补充引入FontAwesome样式资源，确保图标可以正常渲染
• 给包裹图片的<a>标签设置相对定位，作为图标的定位父容器
• 插入播放图标后，使用Bootstrap内置的定位工具类实现图标完全居中，可按需调整图标大小、颜色等样式属性

完整修改后代码 #

<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <!-- 引入FontAwesome样式 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>

<body>
  <div class="d-flex border-bottom  mb-1 mt-3">
    <!-- Media -->
    <ul class="list-unstyled video-list-thumbs row">
      <li class="col-lg-3 col-sm-4 col-xs-6">
        <a href="#" class="position-relative d-block">
          <img src="https://curso-gratis.com.mx/wp-content/uploads/2021/03/logo-bootstrap.png" alt="C" class="img-fluid" height="130px" />
          <!-- 居中的播放图标 -->
          <i class="fas fa-play-circle fs-1 text-white position-absolute top-50 start-50 translate-middle"></i>
        </a>
      </li>
    </ul>
    <!-- Content -->
    <div class="ml-2">
      <h5 class="mb-0 ml-2">
        Lesson 1 : Lorem ipsum dolor sit.

      </h5>
      <span class="ms-1 fs-6 text-muted h6 ml-3">Duration : 15min</span>
      <p class="ml-3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora, ratione rem vitae officia quo laudantium nemo molestiae! Esse, sed ipsam.</p>

    </div>
  </div>
</body>

</html>

样式说明 #

• position-relative：给父级a标签设置相对定位，作为绝对定位元素的参照
• position-absolute top-50 start-50 translate-middle：Bootstrap5内置类，实现元素相对于父级完全居中，无需额外写自定义CSS
• fs-1 text-white：分别设置图标大小为第一档大号字体、颜色为白色，可按需修改为其他值

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