Html 如何使字体图标显示在其他文本后面，以模拟背景图像？

我希望图标在文本后面水平和垂直居中显示

我尝试了多种组合，包括

位置：绝对

，

位置：相对

，

z-index

，

显示：灵活

，但未能达到预期效果

<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
    <div class="border rounded p-3 mb-4 overflow-hidden" style="height:200px;">
        <span class="fas fa-user-tie fa-3x fa-fw text-secondary"></span>
        <strong>Header</strong><br />
        Text text text text, etc.<br />
    </div>
</div>

标题

文本等

您必须给父容器一个

位置：相对
，子容器的
位置：绝对
才能工作。然后将图标以不同的跨度包装到文本中，并使位置为绝对位置

Eg

我的小提琴非常粗糙，因此对此表示歉意，但是应该有足够的空间让您相应地修改代码，以实现您的目标。
您必须为父容器提供一个
位置：相对
，以便子容器的
位置：绝对
工作。然后将图标以不同的跨度包装到文本中，并使位置为绝对位置

Eg

我的小提琴非常粗糙，因此对此表示歉意，但是应该有足够的空间让您相应地修改代码以实现您的目标。
我必须调整图标的垂直位置，因为它是在距离图标顶部50%（中间）的位置渲染的。当图标真的很大（
fa-x9
）时，这一点很重要。是的，你必须进行一些小的调整和调整（正如我所说，这是一个粗糙的小提琴），但我很高兴它为你提供了实现目标所需的东西！我必须调整图标的垂直位置，因为它是在距图标顶部50%（中间）的位置渲染的。当图标真的很大（
fa-x9
）时，这一点很重要。是的，你必须进行一些小的调整和调整（正如我所说，这是一个粗糙的小提琴），但我很高兴它为你提供了实现目标所需的东西！