Sass 如何对齐这段文字并将其置于图标前面？

使用以下CSS：

.notice--info::before {
    position: relative;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    top: .5em;
    left: 0;
    color: #ff980052;
    content: "\f071 ";
    font-size: 4em;
    vertical-align: text-top;
    line-height: .1em;
    text-indent: 0;
}

我成功地实现了这种外观：

在“最小错误”主题上使用Jekyll中的Kramdown标记：

{: .notice--info}
Important: Our systems are evolving and becoming more and more interconnected and dependent upon one another.  Therefore, we're providing a single checklist to handle all aspects of the morning prep so we can all work as a team on all aspects of the production.

目标是在默认设置中添加字体图标作为水印

问题1:如何使第一行在没有缩进的情况下重叠？
问题2:如何将文本置于最前面，使其成为顶层，而不会被字体图标的alpha通道冲掉

---

谢谢

我已经开始使用Unicode而不是Font-Awesome来重新创建您的预期效果，因为您现在可以通过Unicode和CSS过滤器的组合来实现如此多的效果，以至于像Font-Awesome这样的第三方依赖性（这在2010年代早期很流行）可能不再必要了

主要是

• 我已经给了段落

  文本对齐：justify

• 我给了这段文字一个

  rgba（）

  背景色，使它通俗易懂

• 最后，我使用

  -6

  的

  z索引将警告符号放置在段落下方

工作示例：

。注意--info{
位置：相对位置；
填充：12px 12px 30px 12px；
字体大小：14px；
线高：24px；
文本对齐：对齐；
字体系列：无衬线；
背景色：rgba（187197224,0.3）；
}
.注意--info:：before{
内容：'\26A0\FE0F'；
显示：块；
位置：绝对位置；
顶部：42px；
左：6px；
z指数：-6；
字号：80px；
过滤器：色调旋转（-10度）饱和（8）；
不透明度：0.5；
}

重要提示：我们的系统正在不断发展，并变得越来越相互关联和依赖。因此，我们提供了一个单一的检查表来处理晨练准备的各个方面，以便我们能够在制作的各个方面都作为一个团队工作。