如何用SVG图标替换StartBootstrap模板中的FontAwesome图标？

首先明确原FontAwesome代码的作用：

• fa-stack是图标堆叠容器，负责让内部图标居中叠加；
• fa-stack-2x是底层大图标（这里是蓝色实心圆，text-primary控制颜色）；
• fa-stack-1x是上层小图标（这里是白色购物车，fa-inverse控制颜色）。

你的SVG替换遇到问题的核心原因：硬编码了固定颜色、没利用原堆叠布局、尺寸和viewbox不匹配。下面是两种可行方案：

方案一：保留原堆叠结构，替换为SVG元素 #

<div class="col-md-4">
  <!-- 保留原堆叠容器，确保尺寸和布局和其他图标一致 -->
  <span class="fa-stack fa-4x">
    <!-- 底层蓝色圆圈SVG，对应原fa-circle -->
    <svg class="fa-stack-2x text-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      <circle cx="256" cy="256" r="224" fill="currentColor"/>
    </svg>
    <!-- 上层白色数字5SVG，对应原fa-shopping-cart -->
    <svg class="fa-stack-1x fa-inverse" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <g stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="9"/>
        <path d="M9.5 16.236C10.031 16.711 10.732 17 11.5 17C13.157 17 14.5 15.657 14.5 14C14.5 12.343 13.157 11 11.5 11C10.732 11 10.031 11.289 9.5 11.764L10.5 7H14.5"/>
      </g>
    </svg>
  </span>
  <h4 class="my-3">E-Commerce</h4>
  <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>

关键调整： #

1. 保留fa-stack fa-4x容器，复用原布局样式；
2. 用currentColor让SVG继承模板的text-primary/fa-inverse颜色，去掉硬编码的#292929；
3. 删除多余的clipPath，简化SVG结构。

方案二：合并为单个SVG，适配堆叠尺寸 #

<div class="col-md-4">
  <span class="fa-stack fa-4x">
    <svg class="text-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="100%" height="100%">
      <!-- 底层蓝色实心圆 -->
      <circle cx="256" cy="256" r="224" fill="currentColor"/>
      <!-- 上层白色数字5，通过transform缩放适配圆圈大小 -->
      <g transform="translate(144, 144) scale(16)" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="9" fill="none"/>
        <path d="M9.5 16.236C10.031 16.711 10.732 17 11.5 17C13.157 17 14.5 15.657 14.5 14C14.5 12.343 13.157 11 11.5 11C10.732 11 10.031 11.289 9.5 11.764L10.5 7H14.5"/>
      </g>
    </svg>
  </span>
  <h4 class="my-3">E-Commerce</h4>
  <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>

关键调整： #

1. 将圆圈和数字5合并到一个SVG中，通过transform缩放数字到合适比例；
2. 直接设置数字的stroke为白色，圆圈继承text-primary的蓝色；
3. 保留fa-stack容器确保和其他图标尺寸统一。

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