如何在Bootstrap 4卡片页脚上方叠加图标？附现有卡片代码

我帮你补全并优化了卡片页脚的代码，实现了文本与图标的组合展示，同时保证布局美观协调：

<div class="card">
  <div class="card-header">Featured</div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer d-flex align-items-center justify-content-between">
    <!-- 左侧提示文本 -->
    <span>Updated 3 mins ago</span>
    <!-- 右侧图标链接 -->
    <a href="#" class="text-muted">
      <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-heart-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
      </svg>
    </a>
  </div>
</div>

关键布局细节说明： #

• 用Bootstrap的d-flex、align-items-center和justify-content-between类，实现页脚元素的水平分布与垂直居中，避免文本和图标出现错位
• 示例中使用了Bootstrap官方内置图标，你需要确保项目中已经引入了Bootstrap图标库的相关资源；当然也可以换成你常用的其他图标库，只需要替换对应的图标代码即可
• 如果想让文本和图标紧挨着放在同一行（比如文本后方紧跟图标），可以去掉justify-content-between类，给图标添加ml-2（左边距）来拉开间距：

<div class="card-footer d-flex align-items-center">
  <span>Updated 3 mins ago</span>
  <a href="#" class="text-muted ml-2">
    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-share-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path d="M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5z"/>
    </svg>
  </a>
</div>

这样的写法既符合Bootstrap的设计规范，又能灵活调整文本和图标的位置，适配不同的展示需求~

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