如何在Bootstrap中使用<use>元素调用SVG Sprite图标？

问题核心 #

使用Bootstrap 5.0.2开发网站，已引入Bootstrap Icons，但复制官网图标栅格代码后，<use>标签调用的图标无法显示，需要：

1. 正确通过<use>调用任意Bootstrap Icons图标
2. 添加堆叠（stack）图标并匹配官网示例的尺寸、颜色
3. 替换现有代码中的图标

一、正确引入Bootstrap Icons Sprite #

使用<use>标签的前提是页面已加载Bootstrap Icons的SVG sprite文件，两种引入方式：

• 本地引入：下载Bootstrap Icons包，将bootstrap-icons.svg放入项目目录（如根目录），在HTML头部添加隐藏引用：

<img src="bootstrap-icons.svg" style="display: none;" aria-hidden="true">

• CDN引入：在HTML头部添加对应版本的Bootstrap Icons sprite文件隐藏引用。

注意：本地文件路径必须准确，若文件在子目录（如assets/icons/），路径需改为assets/icons/bootstrap-icons.svg。

二、<use>标签的正确写法 #

不管本地还是CDN引入，<use>的href属性必须包含完整的sprite文件路径+图标ID；若已在页面嵌入图标<symbol>，则直接写#图标ID即可。HTML5中推荐用href替代xlink:href，兼容性更好。

正确示例：

<!-- 本地sprite文件在根目录 -->
<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em">
  <use href="bootstrap-icons.svg#heart-fill"></use>
</svg>

<!-- 页面已嵌入symbol的情况 -->
<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em">
  <use href="#calendar3"></use>
</svg>

三、实现堆叠（Stack）图标 #

堆叠图标需要在同一个<svg>容器中放入两个<use>标签，通过transform调整上层图标位置，并缩小尺寸以匹配官网效果：

<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em">
  <!-- 底层图标 -->
  <use href="bootstrap-icons.svg#circle"></use>
  <!-- 上层图标：平移位置+缩小尺寸 -->
  <use href="bootstrap-icons.svg#check" transform="translate(4 4)" width="0.75em" height="0.75em"/>
</svg>

四、替换后的完整代码 #

以下是统一写法、替换图标（包含堆叠图标）的代码，保持官网的1.75em尺寸和text-muted颜色：

<!-- Start of  Features -->
<div style="background-color: #E7E7E7;" class="container-fluid">
  <section style="padding: 0;">
    <div class="container px-4 py-5" id="icon-grid">
      <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5">
        <!-- Heart Fill图标 -->
        <div class="col d-flex align-items-start">
          <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em">
            <use href="bootstrap-icons.svg#heart-fill"></use>
          </svg>
          <div>
            <h4 class="fw-bold mb-0">Featured title</h4>
            <p>Paragraph of text beneath the heading to explain the heading.</p>
          </div>
        </div>
        <!-- 堆叠图标（Circle + Check） -->
        <div class="col d-flex align-items-start">
          <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em">
            <use href="bootstrap-icons.svg#circle"></use>
            <use href="bootstrap-icons.svg#check" transform="translate(4 4)" width="0.75em" height="0.75em"/>
          </svg>
          <div>
            <h4 class="fw-bold mb-0">Featured title</h4>
            <p>Paragraph of text beneath the heading to explain the heading.</p>
          </div>
        </div>
        <!-- Calendar3图标 -->
        <div class="col d-flex align-items-start">
          <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em">
            <use href="bootstrap-icons.svg#calendar3"></use>
          </svg>
          <div>
            <h4 class="fw-bold mb-0">Featured title</h4>
            <p>Paragraph of text beneath the heading to explain the heading.</p>
          </div>
        </div>
        <!-- Home图标 -->
        <div class="col d-flex align-items-start">
          <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em">
            <use href="bootstrap-icons.svg#home"></use>
          </svg>
          <div>
            <h4 class="fw-bold mb-0">Featured title</h4>
            <p>Paragraph of text beneath the heading to explain the heading.</p>
          </div>
        </div>
        <!-- Speedometer2图标 -->
        <div class="col d-flex align-items-start">
          <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em">
            <use href="bootstrap-icons.svg#speedometer2"></use>
          </svg>
          <div>
            <h4 class="fw-bold mb-0">Featured title</h4>
            <p>Paragraph of text beneath the heading to explain the heading.</p>
          </div>
        </div>
        <!-- Toggles2图标 -->
        <div class="col d-flex align-items-start">
          <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em">
            <use href="bootstrap-icons.svg#toggles2"></use>
          </svg>
          <div>
            <h4 class="fw-bold mb-0">Featured title</h4>
            <p>Paragraph of text beneath the heading to explain the heading.</p>
          </div>
        </div>
        <!-- Geo Fill图标 -->
        <div class="col d-flex align-items-start">
          <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em">
            <use href="bootstrap-icons.svg#geo-fill"></use>
          </svg>
          <div>
            <h4 class="fw-bold mb-0">Featured title</h4>
            <p>Paragraph of text beneath the heading to explain the heading.</p>
          </div>
        </div>
        <!-- Tools图标 -->
        <div class="col d-flex align-items-start">
          <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em">
            <use href="bootstrap-icons.svg#tools"></use>
          </svg>
          <div>
            <h4 class="fw-bold mb-0">Featured title</h4>
            <p>Paragraph of text beneath the heading to explain the heading.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>
<!-- End of  Features -->

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