Unable to add an icon at left of an input box in twitter bootstrap

Question

I am designing a login page here and I want to add the icon glyphicon-eye-open inside the password input field on the right, but I am unable to do so.

I tried putting it inside .has-feedback but it didn't work.
I tried the solution to Add Bootstrap Glyphicon to Input Box, but that didn't work as well.

There might be an external style-sheet causing the problem, but I'm unable to fix it.

Answer 1

Using bootstrap's native validation states is definitely preferable to writing custom CSS here.

When using .has-feedback, make sure you also add the class .form-control-feedback to the glyphicon. It should look like this:

<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

For more info, see my answer to adding a Bootstrap Glyphicon to Input Box

Answer 2

Insert the icon inside of #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>

Then use the following CSS:

#password {
    position: relative;
}

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

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