Bootstrap：在輸入框中添加Glyphicon

我的網頁上有一個簡單的日期範圍輸入框。我正在嘗試添加一個簡單的壓光機圖形（框內）。不管我嘗試它不顯示出來：Bootstrap：在輸入框中添加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>

但是它僅顯示爲：

林正在嘗試這樣的事情：

來源

2016-06-07 newkid101

您使用的引導？ – scaisEdge

是 - 已更新標記 – newkid101

您是否在瀏覽器中打開了開發人員檢查工具並使用CSS進行了檢查？我通常發現這對於解決樣式問題非常有幫助。這非常關乎CSS。 – SunSparc

也許你的問題是你說你想要一個.glyphicon圖標，但在你的代碼中你有.fa。 fa = font-awesome，而不是。

試試這個代碼：

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

來源

2016-06-07 20:22:16

首先，你可能使用不正確的類和HTML元素。 fa和fa-calendar都是font-awesome類添加這些圖標。您也希望在您的HTML <span>類中使用和glyphicon-calendar。

其次，你可以使用包裝和一些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>

的去除引導CSS的默認邊框可以在這裏找到：Override twitter bootstrap Textbox Glow and Shadows

來源

2016-06-07 20:48:40

Bootstrap：在輸入框中添加Glyphicon

回答

相關問題