我的网页上有一个简单的日期范围输入框。我正在尝试添加一个简单的日历glyphicon(在框内)。无论我尝试什么,它都不会出现:
我的代码:
<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>
然而它只显示为:
我正在尝试这样的事情:
答案 0 :(得分: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>
答案 1 :(得分:0)
首先,您可能正在使用不正确的类和HTML元素。 fa
和fa-calendar
是 font-awesome 类来添加这些图标。您也希望在HTML glyphicon
课程中使用glyphicon-calendar
和<span>
。
其次,您可以使用包装器和一些CSS来实现此目的。请参阅下面的代码:
.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;
}
&#13;
<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>
&#13;
可以在此处找到从Bootstrap CSS中删除默认边框:Override twitter bootstrap Textbox Glow and Shadows