Html 如何使字体图标中的背景圆圈变小？

我需要使用字体Awesome生成以下警告标志：

但是，我无法完全按照原样制作，因为我有一个额外的边界：

这是我的HTML：

<div role="alert" class="alert alert-dismissible">
  <i id="exclamation-mark" class="fa fa-exclamation-circle extraClass" aria-hidden="true"></i>
  <p style="display: inline;vertical-align: middle">
    <span>Oops! Something went horribly wrong. </span> We’re really sorry. Please try that again.
  </p>
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    ×
  </button>
</div>

---

是我的代码笔链接。

修复非常简单。使用不带圆圈的图标版本，然后手动添加圆圈

修正：codepen.io/anon/pen/JJoZVo？编辑器=1100

HTML

<div role="alert" class="alert alert-dismissible">
  <i id="exclamation-mark" class="fa fa-exclamation extraClass" aria-hidden="true"></i>
  <p style="display: inline;vertical-align: middle">
    <span>Oops! Something went horribly wrong. </span> We’re really sorry. Please try that again.
  </p>
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    ×
  </button>
</div>  

---

修复非常简单。使用不带圆圈的图标版本，然后手动添加圆圈

修正：codepen.io/anon/pen/JJoZVo？编辑器=1100

HTML

<div role="alert" class="alert alert-dismissible">
  <i id="exclamation-mark" class="fa fa-exclamation extraClass" aria-hidden="true"></i>
  <p style="display: inline;vertical-align: middle">
    <span>Oops! Something went horribly wrong. </span> We’re really sorry. Please try that again.
  </p>
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    ×
  </button>
</div>  

---

可以使用径向渐变绘制背景：

background: radial-gradient(circle at center,white 20px,transparent 20px) no-repeat center;

p>span{
字体大小：粗体；
}
div{
颜色：白色；
文本对齐：居中；
背景色：#db2b4b；
}
第一组{
字体大小：50px！重要；/*用于演示，请参见*/
颜色：#ff91a5；
背景：径向梯度（中心圆，#ffffffff20px，rgba（0,0,0,0）20px）无重复中心；
边界半径：50%；
高度：1米；
宽度：1米；
}
.课外活动{
字号：3em；
}

哎呀！出了大问题。我们真的很抱歉。请再试一次。

×

您可以使用径向渐变绘制背景：

background: radial-gradient(circle at center,white 20px,transparent 20px) no-repeat center;

p>span{
字体大小：粗体；
}
div{
颜色：白色；
文本对齐：居中；
背景色：#db2b4b；
}
第一组{
字体大小：50px！重要；/*用于演示，请参见*/
颜色：#ff91a5；
背景：径向梯度（中心圆，#ffffffff20px，rgba（0,0,0,0）20px）无重复中心；
边界半径：50%；
高度：1米；
宽度：1米；
}
.课外活动{
字号：3em；
}

哎呀！出了大问题。我们真的很抱歉。请再试一次。

×

使用flexbox：

div{
颜色：白色；
文本对齐：居中；
背景色：#db2b4b；
}
#感叹号{
字号：80px；
颜色：白色；
背景：#ff91a5；
边界半径：50%；
填充：8px；
利润率：5px20px；
高度：1米；
宽度：1米；
}
.类外{
字号：3em；
}
#接近{
字号：80px；
颜色：白色；
背景：#透明；
边界半径：50%；
填充：8px；
利润率：5px20px；
高度：1米；
宽度：1米；
}
.警惕{
显示器：flex；
对齐项目：居中；
证明内容：周围的空间；
}
p{
线高：0.8em；
}
p、 大胆的{
字体大小：粗体；
}

哎呀！出了大问题

我们真的很抱歉。请再试一次

使用flexbox：

div{
颜色：白色；
文本对齐：居中；
背景色：#db2b4b；
}
#感叹号{
字号：80px；
颜色：白色；
背景：#ff91a5；
边界半径：50%；
填充：8px；
利润率：5px20px；
高度：1米；
宽度：1米；
}
.类外{
字号：3em；
}
#接近{
字号：80px；
颜色：白色；
背景：#透明；
边界半径：50%；
填充：8px；
利润率：5px20px；
高度：1米；
宽度：1米；
}
.警惕{
显示器：flex；
对齐项目：居中；
证明内容：周围的空间；
}
p{
线高：0.8em；
}
p、 大胆的{
字体大小：粗体；
}

哎呀！出了大问题

我们真的很抱歉。请再试一次

@Korgrue，我只是做了一点小小的改变，但这是我想要的。您可以提供一个答案，解释您为解决这个问题所做的一切。@Korgrue，我只是做了一点小小的改变，但这正是我想要的。如果您愿意，您可以提供一个答案，解释您为解决此问题所做的工作。非常感谢。我只是做了一些改变来搭配颜色。非常感谢。我只是做了一些更改来匹配颜色。我应该在哪里添加？在

i

元素中？@lmiguelvargasf应该使用

背景：白色用于字体显示的i标记；）我应该在哪里补充呢？在
i
元素中？@lmiguelvargasf应该使用
背景：白色用于字体显示的i标记；）非常感谢您的回复。它的覆盖范围甚至超出了我的要求。为什么所有内容都保持对齐？代码已调整。新增内容：为FlexBox留出空间非常感谢您的回复。它的覆盖范围甚至超出了我的要求。为什么所有内容都保持对齐？代码已调整。添加了对齐内容：flexbox周围的空间