Prevent wrap between span and word

I am writing documentation in AsciiDoc (then served in HTML using Jekyll).

I'm using FontAwesome icons to denote parts of UI, like this: icon:upload[] *Upload files*, which renders into HTML as <span class="icon"><i class="fa fa-upload"></i></span> <strong>Upload files</strong>.

I would like to prevent line wrap between the icon and its label. I tried using a non-braking space (U+00a0) which ultimately renders at …</span>NBSP<strong>…, but obviously, that doesn't work, because the span is not a word from the browser's point of view, and the line wrap occurs on the span boundary regardless the NBSP.

I can't see a viable way to prevent the line wrap.

Hence, my question: can you think of a way that would ensure the icon stays on the same line as the word after it? Preferably, using some trick in the AsciiDoc file or possibly in CSS rather than by changing the structure of the HTML entirely. But there are no hard limitations that I know of even in this regard.

Thank you very much for ideas.

Make it *icon:upload[] Upload files*, to get the icon rendered inside the strong element.

And then you can target only those strong elements that contain icons, using the selector strong:has(.icon)