如何将图标和文本绑定在一起？

Question

我使用<span>作为我的图标和文字的容器。

<span>
    <i class="calendar icon"></i>
    {{ .Date.Format "Jan 2, 2006" }}
</span>

当前代码允许单独包装<i>和文本，因此我经常看到它们都存在于不同的行中。由于图标是指文本，我想将它们绑定在一起，有点像nowrap替代。有可能吗？

Answer 1

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 

Works
<div style="width:100px"><span style="white-space: nowrap;"><i class="fa fa-calendar"></i> Apr 18, 2018</span></div>
<hr/>
Does not:
<div style="width:100px"><span><i class="fa fa-calendar"></i> Apr 18, 2018</span></div>