如何在输入字段中包含字形图标？

Question

通过使用 Bootstrap 类为用户输入创建了一个表单。我已经包含了简单的表格供您阅读。

问题：

1.) 我试图将字形图标放在表单的输入框中，但是图标放在外面。我在输入标记类中调用了glyphicon glyohicon-date，但图标位于输入框之外。我怎么可能在输入框中输入呢？

谢谢。

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

已设法通过给定的链接解决它：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>

Answer 2

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

Answer 3

这是Bootstrap的课程作业

使用 Bootstrap 中的“With optional icons”方法可以实现：

例如，我对这个问题的回答：

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

你可以参考下面的链接找到你想要的：

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

还有一点你要知道的是，这只是将图标添加到输入框，而不会改变它后面的JavaScript的默认动作，所以你添加的图标是没有响应的，除非你改变默认事件这个输入框。