如何让字体真棒图标出现在其他文本后面，以模拟背景图像？

Question

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

我尝试了很多position:absoulute、position:relative、z-index、display:flex的组合，但是都没有达到想要的效果。

<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>

Answer 1

您必须为父容器提供 position:relative，子容器的 position:absolute 才能工作。然后将您的图标包装在与您的文本不同的范围内，并使位置绝对化。

例如； https://jsfiddle.net/L9cb8wao/

我的 fiddle 非常粗糙，对此深表歉意，但是应该有足够的内容让您相应地修复您的代码以实现您所追求的目标。

如何让字体真棒图标出现在其他文本后面，以模拟背景图像？

How can I make a font awesome icon appear behind other text, as to emulate a background image?

html

css

twitter-bootstrap

font-awesome