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

Question

I want the icon to appear centered horizontally and vertically behind the text.

I have tried numerous combinations of position:absoulute , position:relative , z-index , display:flex , but have not been able to acheive the wanted effect.

<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

You will have to give the parent container a position:relative for the children's position:absolute to work. Then wrap your icon in a different span to your text and make the positions absolute.

Eg; https://jsfiddle.net/L9cb8wao/

My fiddle is extremely rough, so apologies about that, however there should be enough there for you to fix your code accordingly to achieve what you're after.