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

Question

使用 Bootstrap classes 创建了一个供用户输入的表单。我已经包含了简单的形式供您阅读。

问题：

1.) 我试图将字形图标放在表单的输入框内，但图标放在外面。我在输入标签 class 中调用了 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

已设法从给定的 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>

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>

您可以参考下面的link找到您想要的：

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

还有一点你要知道的是，这只是给输入框添加了图标，并没有改变后面JavaScript的默认动作，所以你添加的图标是没有反应的，除非您更改此输入框的默认事件。

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

How to include the glyphicon within input field?

html

forms

twitter-bootstrap

glyphicons