无法在twitter bootstrap的输入框左侧添加图标

Question

我正在设计一个login page here，我想在右侧的密码输入字段中添加图标glyphicon-eye-open，但我无法这样做。

我试过把它放在.has-feedback里面，但它不起作用 我尝试了Add Bootstrap Glyphicon to Input Box的解决方案，但这并没有奏效。

可能有外部样式表导致问题，但我无法修复它。

Answer 1

使用bootstrap's native validation states绝对比在这里编写自定义CSS更可取。

使用.has-feedback时，请确保您还将类.form-control-feedback添加到glyphicon。它应该是这样的：

<div class="form-group has-feedback">
    <label class="control-label">Username</label>
    <input type="password" class="form-control" placeholder="Password" /> 
    <i class="glyphicon glyphicon-eye-open form-control-feedback"></i>
</div>

Demo in jsFiddle

有关详细信息，请参阅我对adding a Bootstrap Glyphicon to Input Box

的回答

Answer 2

在#password：

中插入图标

<div class="form-group " id="password">
    <input placeholder="Password" name="password" class="form-control input-field" type="password"> 
    <span class="glyphicon glyphicon-eye-open"></span>
</div>

然后使用以下CSS：

#password {
    position: relative;
}

#password input[type="password"] {
    padding-right: 30px;
}

#password .glyphicon {
    right: 65px;
    position: absolute;
    top: 12px;
}