Bootstrap 5 引导图标的圆形背景

Question

我可以在 Bootstrap 5 中实现带有圆形背景区域的 Bootstrap 图标吗？ 目前我制作了这个椭圆。我想循环执行

.green{
  background-color:green;
}
.i1{
  border-radius:50%
}
.i2{
  border-radius:9px 9px;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"/>
<i class="i1 bi bi-check-circle green"></i>
<i class="i2 bi bi-check-circle green"></i>

提前致谢

Answer 1

.rounded-circle

您正在寻找的引导程序。

.green {
  background-color: green;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />

<i class="bi bi-check-circle green rounded-circle"></i>
<i class="bi bi-check-circle green rounded-circle"></i>