Html 如何定位字体图标？

我试图定位一个字体很棒的图标-一个感叹号堆叠在一个圆圈的顶部-如下所示：

发生的事情是，它看起来像这样：

有什么新鲜事吗

<span class="fa-stack">
    <i class="fa fa-circle fa-stack-1x" style="color:red"></i>
    <i class="fa fa-exclamation fa-stack-1x" style="color:white"></i>
</span>

---

使用边距。在本例中，我使用了负边距

.fa-stack {
    z-index: 100;
    margin-left: -20px;
}

Z索引确保图标位于文本顶部。根据您如何构建它，您可能需要也可能不需要添加它。这个数字只需要高于文本的z索引（100是任意的）

负边距将移动它。

最新消息

删除字体图标前的空格，并将代码放在上标中