如何证明该文本块的合理性并将其置于图标前面？

如何解决如何证明该文本块的合理性并将其置于图标前面？

使用以下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.

目标是向Minimal Mistakes Utility Classes默认设置中添加真棒字体图标作为水印。

问题1：如何使第一行重叠而没有缩进？
问题2：如何将文本放在最前面，使它成为顶层，并且不会被Font Awesome图标的alpha通道冲掉？

谢谢！

解决方法

我打算使用 Unicode 而不是 Font Awesome 来重新创建您想要的效果，因为结合使用 Unicode，您现在可以实现很多目标和 CSS过滤器，也许不再需要像 Font Awesome 这样的第三方依赖项（在2010年代初期很流行）。

主要是

• 我已经给了text-align: justify段
• 我通过赋予段落rgba() background-color
使该段落透明
• 最后，我使用z-index中的-6
将警告符号放置在段落的下面

工作示例：

.notice--info {
  position: relative;
  padding: 12px 12px 30px 12px;
  font-size: 14px;
  line-height: 24px;
  text-align: justify;
  font-family: sans-serif;
  background-color: rgba(187,197,224,0.3);
}

.notice--info::before {
  content: '\26A0 \FE0F';
  display: block;
  position: absolute;
  top: 42px;
  left: 6px;
  z-index: -6;
  font-size: 80px;
  filter: hue-rotate(-10deg) saturate(8);
  opacity: 0.5;
}

<p class="notice--info"><strong>Important:</strong> 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.</p>