Bootstrap WebFont图标添加背景色：仅限制在图标边缘的需求

WebFont版本的Bootstrap图标本质是字体字符，直接给<i>元素加背景色会覆盖整个元素的盒模型范围，而非图标本身的形状。可以通过CSS的background-clip: text属性实现背景色仅贴合图标轮廓的效果，无需切换到SVG方案。

实现步骤： #

1. 添加自定义CSS样式，利用background-clip: text将背景色限制在文字（图标）范围内，同时将图标颜色设为透明以显示背景：

.icon-bg {
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text; /* 兼容Chrome、Safari等webkit内核浏览器 */
}

2. 在图标元素上结合Bootstrap的背景色类与自定义类：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">

<style>
.icon-bg {
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}
</style>

<div class="p-3" style="font-size:3rem">
  <i class="bi bi-emoji-smile bg-warning icon-bg"></i>
  <i class="bi bi-heart bg-danger icon-bg"></i>
  <i class="bi bi-circle bg-success icon-bg"></i>
  <i class="bi bi-bluetooth bg-primary icon-bg"></i>
</div>

原理说明： #

• background-clip: text：指定背景绘制区域为文字的填充区域，仅在文字（图标字符）的形状范围内显示背景色。
• color: transparent：将图标原本的颜色设为透明，让背景色透过显示出来。
• -webkit-background-clip: text：为webkit内核浏览器提供兼容性支持，目前主流浏览器已原生支持background-clip: text，但添加此声明可覆盖更多旧版本浏览器。

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