Bootstrap : Add Glyphicon inside input box

Question

I have a simple daterange input box on my webpage. I am trying to add a simple calender glyphicon to it (inside the box). No matter what i try it doesnt show up:

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

However It only shows up as :

Im am trying for something like this:

Have you opened the developer inspection tool in the browser and played around with the CSS? I usually find that to be very helpful in troubleshooting styling issues. This is very much a CSS concern. — SunSparc, Jun 07 '16 at 20:00

score 1 · Answer 1 · edited Jun 07 '16 at 20:53

Maybe your problem is that you are saying you want a .glyphicon icon but in your code you have .fa. fa = font-awesome, not glyphicon.

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

score 0 · Answer 2 · edited May 23 '17 at 11:48

First, you're probably using the incorrect class and HTML element. fa and fa-calendar are font-awesome classes to add those icons. You want to use glyphicon and glyphicon-calendar in your HTML <span> class as well.

Second, you could use a wrapper and some CSS to achieve this. See the snippet below:

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

The removal of the default borders from Bootstrap CSS can be found here: Override twitter bootstrap Textbox Glow and Shadows

Bootstrap : Add Glyphicon inside input box

2 Answers2