Bootstrap: Glyphicon in das Eingabefeld

Question

Ich habe ein einfaches Eingabefeld für den Datumsbereich auf meiner Webseite. Ich versuche, ein einfaches Glyphon-Kalender hinzuzufügen (innerhalb der Box). Egal, was ich versuche, tut es zeigen:

Mein Code:

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

aber es zeigt nur auf, als:

Im versuche etwas wie folgt aus:

Answer 1

Vielleicht Ihr Problem ist, dass Sie sagen, Sie wollen ein .glyphicon Symbol, aber in Ihrem Code haben Sie .fa. fa = font-awesome, nicht glyphicon.

Versuchen Sie diesen Code:

<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

Zuerst sind Sie wahrscheinlich die falsche Klasse und HTML-Element verwendet wird. fa und fa-calendar sind font-awesome Klassen zum Hinzufügen dieser Symbole. Sie möchten glyphicon und glyphicon-calendar in Ihrer HTML <span> Klasse auch verwenden.

Zweitens könnten Sie einen Wrapper und einige CSS verwenden, um dies zu erreichen. Siehe das Snippet unten:

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

Die Entfernung der Standard Grenzen von Bootstrap CSS ist hier zu finden: Override twitter bootstrap Textbox Glow and Shadows