How to include the glyphicon within input field?

Question

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>

Possible duplicate of [Add Bootstrap Glyphicon to Input Box](http://stackoverflow.com/questions/18838964/add-bootstrap-glyphicon-to-input-box) — Helder Ferreira, Dec 28 '15 at 02:33

score 1 · Accepted Answer · edited Dec 29 '16 at 15:19

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

<div class="form-group has-feedback">
  <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>

score 0 · Answer 2 · answered Aug 23 '16 at 16:20

<div class="form-group form-inline">
                    <label for="datetime" class="col-sm-2 control-label">Date and Time</label>
                    <div class="col-sm-5">
                        <div class="form-group has-feedback">
                            <input type="text" class="form-control" id="datetime" name="datetime" placeholder="Date">
                            <i class="glyphicon glyphicon-calendar form-control-feedback"></i>
                        </div>
                    </div>
                    <div class="col-sm-5">
                        <div class="form-group has-feedback">
                            <input type="text" class="form-control" id="datetime" name="datetime" placeholder="Time">
                            <i class="glyphicon glyphicon-time form-control-feedback"></i>
                        </div>
                    </div>
                </div>

score 0 · Answer 3 · answered Sep 17 '16 at 00:31

This is a coursera assignment of Bootstrap

using the "With optional icons" method in Bootstrap you can achieve this:

for example, my answer to this question:

<div class="form-group has-feedback">
 <label class="col-sm-2 control-label" for="date-choose">Date and Time</label>
 <div class="col-sm-5">
  <input type="date" class="form-control" id="date-choose" placeholder="Date">
  <i class="glyphicon glyphicon-calendar form-control-feedback" aria-hidden="true"></i>
 </div>
</div>

you can refer to the link below to find what you want:

http://getbootstrap.com/css/#forms-control-validation

The one more thing you have to know is that this only adds the icon to the input box but not changes the default action of the JavaScript behind it, so the icon you are adding has no response unless you change the default event of this input box.

How to include the glyphicon within input field?

3 Answers3