Bootstrap 5中如何为Bootstrap图标实现圆形背景？当前显示为椭圆

你遇到的椭圆问题，根源在于<i>标签默认是行内元素，宽高由图标自身尺寸决定（多数Bootstrap图标并非严格正方形），此时设置border-radius:50%会因宽高不等生成椭圆。解决核心是给图标设置相等的宽高，并让图标在容器内居中。

方案1：自定义CSS类 #

创建通用的圆形容器类，统一控制宽高和居中逻辑：

/* 圆形图标容器 */
.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 自定义宽高，保持数值一致即可 */
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.green {
  background-color: green;
  color: white; /* 可选：设置图标颜色，提升视觉对比度 */
}

对应的HTML代码：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css"/>
<i class="icon-circle bi bi-check-circle green"></i>

方案2：使用Bootstrap内置工具类 #

无需自定义CSS，直接用Bootstrap原生工具类组合实现：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css"/>
<!-- w-10/h-10 控制宽高（对应2.5rem），rounded-circle实现圆形，text-white设置图标颜色 -->
<i class="d-inline-flex align-items-center justify-content-center w-10 h-10 rounded-circle green bi bi-check-circle text-white"></i>

工具类说明：

• d-inline-flex：将元素转为行内flex容器，方便快速实现居中
• align-items-center/justify-content-center：让图标在容器内垂直+水平居中
• w-10/h-10：设置相等的宽高，可根据需求替换为w-8/h-8、w-12/h-12等尺寸工具类
• rounded-circle：Bootstrap内置的50%圆角类，等价于border-radius:50%

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