Bootstrap：在输入框内添加 Glyphicon答案

【问题标题】：Bootstrap : Add Glyphicon inside input boxBootstrap：在输入框内添加 Glyphicon
【发布时间】：2016-10-07 20:01:14
【问题描述】：

我的网页上有一个简单的日期范围输入框。我正在尝试向其添加一个简单的日历字形图标（在盒子内）。无论我尝试什么，它都不会出现：

我的代码：

<div class="col-xs-6 date-range form-group has-feedback" id="date_range">
    <input name="daterange" class="form-control pull-right" style="width: 40%">
    <i class="fa fa-calender form-control-feedback"></i>
</div>

但是它只显示为：

我正在尝试这样的事情：

【问题讨论】：

你正在使用引导程序？
您是否在浏览器中打开了开发人员检查工具并玩弄了 CSS？我通常发现这对解决样式问题非常有帮助。这在很大程度上是一个 CSS 问题。

标签： html twitter-bootstrap date-range

【解决方案1】：

也许你的问题是你说你想要一个.glyphicon 图标，但在你的代码中你有.fa。 fa = font-awesome，而不是 glyphicon。

试试这个代码：

   <div class="form-group has-feedback">
       <asp:TextBox ID="txtPassword" runat="server" CssClass="form-control" TextMode="Password" placeholder="Password"></asp:TextBox> 
       <span class="glyphicon glyphicon-asterisk form-control-feedback"></span>
   </div>

【讨论】：

【解决方案2】：

首先，您可能使用了不正确的类和 HTML 元素。 fa 和 fa-calendar 是用于添加这些图标的 font-awesome 类。您还想在 HTML 的 <span> 类中使用 glyphicon 和 glyphicon-calendar。

其次，您可以使用包装器和一些 CSS 来实现此目的。请参阅下面的 sn-p：

.input-wrapper {
  border: 1px solid #ccc;
  position: relative;
  padding-left: 20px;
}
.input-wrapper input { // Remove the borders
  border: none;
  outline: none;
  border: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}
.input-wrapper span.glyphicon {
  position: absolute;
  top: 10px;
  left: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-xs-6 date-range form-group has-feedback" id="date_range">
  <div class="input-wrapper">
    <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
    <input name="daterange" class="form-control">
  </div>
</div>

从 Bootstrap CSS 中删除默认边框可以在这里找到：Override twitter bootstrap Textbox Glow and Shadows

【讨论】：