Luke Luke - 3 months ago 18
HTML Question

How to include the glyphicon within input field?

Created a form for user input by making use of Bootstrap classes. I have included the simple form inclusion for your perusal.

Issue:

1.) I am trying to place the glyphicon within the input box of the form, however the icon is placed outside. I have called the

glyphicon glyohicon-date
within the input tag class but the icon is placed outside of the input box. How is it possible for me to input it inside the input box?

Thanks.



<div class="row row-content">
<div class="col-xs-12 col-lg-3">
<p style="padding:20px;"></p>
<h3 align=center>Reserve A Table</h3>
</div>
<div class="col-xs-12 col-sm-9">

<form class="form-horizontal" role="form">

<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">Number of Guests</label>

<div class="input-group col-sm-4">
<input type="radio">
<span> 1 </span>
<input type="radio">
<span> 2 </span>
<input type="radio">
<span> 3 </span>
<input type="radio">
<span> 4 </span>
<input type="radio">
<span> 5 </span>
<input type="radio">
<span> 6 </span>
</div>
</div>

<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">Date & Time</label>
<div class="col-sm-4">
<input type="text" class="form-control glyphicon glyphicon-calendar" aria-hidden="true" id="Date" name="Date" placeholder="Date"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
</div>
<div class="col-sm-4">
<input type="text" class="form-control glyphicon glyphicon-time" id="Time" name="Time" placeholder="Time">
</div>
</div>

<button type="submit" class="btn btn-default">Reserve</button>
</form>

<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span>
</button>
<strong>Warning!</strong> Please <strong>call</strong> us to reserve for more than six guests.
</div>
</div>
</div>




Answer

Have managed to solve it from the given link: With optional icons

<div class="form-group">
  <label for="firstname" class="col-sm-2 control-label">Date & Time</label>
  <div class="col-sm-4">
    <input type="text" class="form-control" id="Date" name="Date" placeholder="Date">
    <span class="glyphicon glyphicon-calendar form-control-feedback" aria-hidden="true"></span>
  </div>
  <div class="col-sm-4">
    <input type="text" class="form-control" id="Time" name="Time" placeholder="Time">
    <span class="glyphicon glyphicon-time form-control-feedback" aria-hidden="true"></span>
  </div>
</div>