Загрузочный лоток: добавьте Glyphicon внутри поля ввода

Question

У меня есть простой поле ввода данных на моем веб-странице. Я пытаюсь добавить к нему простой глинистый каландр (внутри коробки). Независимо от того, что я стараюсь не не показывает вверх:

Мой код:

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

Однако это только показывает, как:

Im пытаюсь что-то вроде этого:

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

Answer 2

Во-первых, вы, вероятно, используя неправильный класс и HTML-элемент. fa и fa-calendar являются font-awesome классы, чтобы добавить эти значки. Вы хотите использовать glyphicon и glyphicon-calendar в своем HTML-коде <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; 
 
}

<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