How to place text over font awesome icon? - css

Question

I would like to create a div with text Some meaningful text and a heart icon behind word meaningful exactly.
I am using font awesome icon, so the icon is <i class="fas fa-heart"></i> with width.
How can I can achieve with existing DOM?
<div id="text-over-icon">
<span>Some</span>
<span>meaningful</span>
<span>text</span>
</div>
Hopefully, it can be done without float or position: absolute.

Answer 1

Hopefully, it can be done without float or position: absolute.
You can make use of CSS grid, and position both items on the same column/row.
The only drawback is you'll have to edit the html and nest another span to wrap the text.
[grid] {
display: inline-grid;
}
[grid]>i {
grid-row: 1/1;
grid-column: 1/1;
text-align: center;
color: red;
}
[grid]>span {
grid-row: 1/1;
grid-column: 1/1
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<div id="text-over-icon">
<span>Some</span>
<span grid>
<i class="fas fa-heart"></i>
<span>meaningful</span>
</span>
<span>text</span>
</div>

Answer 2

Using position:absolute you can achieve this
.parent {
position: relative;
}
.fa.fa-heart {
color: #ff0;
}
.fa.fa-heart:before {
font-size: 50px;
}
#text-over-icon {
position: absolute;
top: 0;
left: 0;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="parent">
<div class="fa fa-heart"></div>
<div id="text-over-icon">
<span>Some</span>
<span>meaningful</span>
<span>text</span>
</div>
</div>