无法将 GlyphIcon 附加到文本框答案

【问题标题】：Can't attach GlyphIcon to Textbox无法将 GlyphIcon 附加到文本框
【发布时间】：2020-11-19 14:57:15
【问题描述】：

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

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

<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>

【问题讨论】：

标签： asp.net-mvc twitter-bootstrap razor bootstrap-datepicker

【解决方案1】：

使用 Bootstrap input group 和 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/

【讨论】：

不幸的是，这些图标没有帮助，它们仍然出现在屏幕的另一侧。当我尝试您的标记时，该图标作为一个不可点击的小图标出现在文本框下方。真的不知道这里出了什么问题。
您使用的是什么版本的引导程序？看来您使用的是版本 3。
我刚刚升级到 4.5，因为我的项目还处于起步阶段，它解决了问题！在功能上仍然存在一些问题，但我会解决的
@TomBennett：是的，我可以告诉您，由于 `.input-group-addon' 类已被弃用，您仍在使用其中一个旧版本。很高兴它现在可以工作了。