如何像Bootstrap图标一样给HTML的<i>标签添加自定义SVG图标？

Bootstrap Icons通过字体图标机制，用content: "\f136"这类Unicode字符调用图标，同时靠fs-*类控制尺寸。要实现自定义SVG图标用<i class="bi my-custom-icon fs-1"></i>的写法，可通过CSS伪元素完成，以下是具体实现方案：

方案一：CSS伪元素+背景图（推荐） #

这种方式适配Bootstrap的fs-*尺寸类，且支持颜色继承（需SVG内设置fill="currentColor"）。

步骤1：准备自定义SVG #

确保你的SVG代码中，fill属性设为currentColor，这样图标颜色会继承父元素的文字颜色，和Bootstrap Icons行为一致。示例SVG：

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
  <path d="M1 14s-1 0-1-1v-10s0-1 1-1h14s1 0 1 1v10s0 1-1 1H1zm4-6h6V4H5v4z"/>
</svg>

步骤2：编写CSS样式 #

复用Bootstrap的.bi类基础样式，再给自定义图标类添加伪元素背景：

/* 复用Bootstrap .bi类的基础布局，确保和官方图标对齐 */
.bi {
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* 自定义图标类 */
.my-custom-icon::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  /* 方式A：嵌入SVG代码为Data URI */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M1 14s-1 0-1-1v-10s0-1 1-1h14s1 0 1 1v10s0 1-1 1H1zm4-6h6V4H5v4z"/></svg>');
  /* 方式B：引用本地SVG文件（需确保路径正确） */
  /* background-image: url('./my-custom-icon.svg'); */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

步骤3：使用图标 #

直接像Bootstrap Icons那样调用：

<i class="bi my-custom-icon fs-1"></i>
<i class="bi my-custom-icon fs-2 text-danger"></i>

fs-*类通过设置font-size，让1em的宽高自动缩放，完美适配尺寸控制；text-*类也能直接改变图标颜色。

方案二：伪元素直接嵌入SVG代码 #

如果不想用背景图，也可以把SVG代码直接写在content中（需注意引号转义）：

.my-custom-icon::before {
  content: '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16"><path d="M1 14s-1 0-1-1v-10s0-1 1-1h14s1 0 1 1v10s0 1-1 1H1zm4-6h6V4H5v4z"/></svg>';
  display: inline-block;
  width: 1em;
  height: 1em;
}

这种方式兼容性略逊于背景图方案，优先推荐方案一。

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