I'm facing an issue with embedding an icon font within text so that it wraps properly. Currently, the only way I can achieve this is by using between the text and the icon (i tag with font awesome). However, this causes a problem as the icon has a width of 0px until the font is loaded. This breaks my layout which is dynamically calculated in JavaScript based on the size of the wrapper element.
In my specific scenario, I have a table with a sticky header and the first two columns are also sticky. This results in four separate tables where I need to ensure that the cell sizes match across all tables. The column headers contain icons like this (?) following the text. I want the text to wrap but I don't want the icon to sit alone on a line. By inserting before the icon and treating it as an inline element, I manage to prevent it from being misaligned with the text. Otherwise, I sometimes end up with a single line where the icon appears at the end.
I've considered using different characters for the font before it loads, such as m, but found that these characters are not as wide as the icon itself.
Despite exploring various options, I cannot utilize flex or table layouts because the text must be able to wrap while the icon should behave like a character. As for preloading the fonts, I face issues since the fonts have different files and errors pop up in the console for fonts that are incompatible with the browser.
<table><thead>
<tr>
<!--...-->
<td>Some text <i class="fa fa-circle"></i></td>
<!--...-->
</tr>
</thead></table>