如何证明此文本块的合理性并将其放在图标前面？答案

【问题标题】：How do I justify this block of text and bring it in front of the icon?如何证明此文本块的合理性并将其放在图标前面？
【发布时间】：2020-12-29 16:31:40
【问题描述】：

使用以下 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 通道洗掉？

谢谢！

【问题讨论】：

标签： sass css-selectors font-awesome

【解决方案1】：

我已经开始使用 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;
}

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

【讨论】：