Icon inside the input

Question

How do I put one icon inside of input?

input:

<input id="password2" class="form-control" placeholder="Enter password" name="Password" type="password" value="" ng-model="user.Password" ng-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}/">

I’d like to see one icon(that) within the input of right-hand side when the user nay type one valid password.

Does anyone know how to do that?

Answer 1

With input does not give, use the tag button which is the same as a button type input, only it accepts html in.

See the code below.

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

<br>

    <div class="col-xs-6">
      <div class="input-group">
        <input class="form-control" id="password2"  placeholder="Enter password" name="Password" type="password" value="" ng-model="user.Password" ng-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}/">

        <span class="input-group-addon">
          <button class="fa fa-exclamation" style="background:transparent;border:none"></button>
        </span>
      </div>
    </div>

Answer 2

I managed using bootstrap form-group, putting the has-feedback and form-control-feedback

Follows the code:

<div class="form-group has-feedback">
                        <label for="password2">Password:</label>

                        <input id="password2" class="form-control" placeholder="Enter password" name="Password"
                               type="password" value="" ng-model="user.Password"
                               ng-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}/">
                        <i ng-show="Registration.Password.$error.pattern" class="fa fa-exclamation-circle fa-lg form-control-feedback" style="color: #A94446; margin-top: 9px;"></i>
    </div>