将字形图标对齐到文本输入框的右侧和内部

Question

我正在尝试将 glyphicon-info-sign 图标添加到使用 bootstrap css 创建的密码输入框中。我试图让图标出现在密码文本框内和右侧。我尝试了各种组合，但图标出现在输入框的底部。
这是 jsfiddle 示例 https://jsfiddle.net/bsbef0qd/ 。谢谢。

<div class="row">
  <div class="form-group add-on col-xs-4">
    <label for="password" class="control-label">Password</label>
    <input type="password" name="userFormPassword" id="userFormPassword" value="" class="form-control input-sm" />
    <span class="input-group-addon">
      <a class='my-tool-tip' data-toggle="tooltip" data-placement="left" title="Some password instructions"> 
        <i class='glyphicon glyphicon-info-sign'></i>
      </a>
    </span>
  </div>
  <div class="form-group col-xs-4">
    <label for="confirm" class="control-label">Confirm Password</label>
    <input type="password" name="confirm" value="" class="form-control input-sm" />
  </div>
</div>

Answer 1

FIDDLE

您需要使用 input-group 并将 label 带到外面。

<div class="row">
  <div class="col-xs-4">
    <label for="password" class="control-label">Password</label>
    <div class="input-group add-on">
      <input type="password" name="userFormPassword" id="userFormPassword" value="" class="form-control input-sm" />
      <span class="input-group-addon">
      <a class='my-tool-tip' data-toggle="tooltip" data-placement="left" title="Some password instructions"> 
        <i class='glyphicon glyphicon-info-sign'></i>
      </a>
    </span>
    </div>
  </div>

将字形图标对齐到文本输入框的右侧和内部

Align glyphicons icon to right and inside text input box

html

javascript

css

glyphicons

twitter-bootstrap-3