I'm really stuck at this supposedly easy task: I'd like to put one single line of text containing white spaces over an FA icon. Following their instructions works only as long as the text does not contain any blanks. Blanks wrap the text into the next line. How can I prevent this so that there's only one single line of text (no matter how wide) put over an icon?
This creates three lines of text over the solid heart icon - I'd like just one.
.fa-layers {
margin:50px;
}
<script src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"></script>
<span class="fa-layers fa-fw">
<i class="fas fa-heart" data-fa-transform="grow-96" style="color:red"></i>
<span class="fa-layers-text" style="font-weight:900">any text here</span>
</span>
Thanks for any hints.
Simply consider white-space:nowrap;
.fa-layers {
margin:50px;
}
.fa-layers-text {
white-space:nowrap;
}
<script src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"></script>
<span class="fa-layers fa-fw">
<i class="fas fa-heart" data-fa-transform="grow-96" style="color:red"></i>
<span class="fa-layers-text" style="font-weight:900">any text here</span>
</span>