I have this case. I need icon font that is inside text so it wrap properly. the only way I can make it like this is if I use between text and icon (i tag with font awesome) the problem is that before the font is loaded the icon have width of 0px. And it break my layout that is written in JavaScript. It calculate the size of the wrapper element.
Explanation for my case, I have table with sticky header and sticky first two columns so I have 4 tables and I need to match the sizes of cells in each table, columns in headers have icons like this (?) after the text. The text need to be wrapped but the icon can't be lonely in line. So I use and icon as inline element, inline-block don't align with text so I sometimes got single line with icon at the end.
I can't use flex or table because i have text that need to be wrapped and icon must be like character. I thought about creating different character for font before it got loaded like m but it's not as wide as the icon.
I can't use preload because fonts have different files and I will got errors (for fonts that are not for that browser) in console that I don't like.
<table><thead>
<tr>
<!--...-->
<td>Some text <i class="fa fa-circle"></i></td>
<!--...-->
</tr>
</thead></table>
I found a way to make this work. I'm using fake icons and hide them when fonts are loaded.
table th i::after {
content: '⌧';
color: transparent;
}
.fonts-loaded table th i::after {
content: none;
}
and I'm using font loading API found in this question How to be notified once a web font has loaded (browser support).
document.fonts.ready.then(function () {
document.documentElement.classList.add('fonts-loaded');
});