无法将 GlyphIcon 附加到文本框

Can't attach GlyphIcon to Textbox

我在尝试将我的 bootstrap 日期选择器图标附加到我的文本框时遇到了实际问题。我通读了所有文档并搜索了几个小时以找到解决方案，但似乎没有任何效果。

是我用我的标记得到的最接近的，但图标似乎与屏幕的右侧对齐

<div  id="sandbox-container">DATE
    <div class="input-group date">
        <input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
    </div>
</div>

使用 Bootstrap input group and Font Awesome icons:

很容易做到

结构

<label for="xxx">Date</label>
<div class="input-group">
    <input type="text" class="form-control" id="xxx">
    <div class="input-group-append">
        <span class="input-group-text">
            <i class="fas fa-calendar-alt"></i>
        </span>
    </div>
</div>

图标选择

我正在向您展示 Font Awesome Icons 的免费版本。您可以使用任何您喜欢的东西来表示日期选择器图标。这是一些：https://fontawesome.com/icons?d=gallery&q=calendar&m=free

屏幕截图

演示

https://jsfiddle.net/davidliang2008/9a20fp3u/37/