How do I put a 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 would like to see a icon ( this ) within input of right when the user does not type a valid password .
Does anyone know how to do this?
I was able to use bootstrap form-group , putting has-feedback and form-control-feedback
The code follows:
<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> With input, do not use the tag button which is the same as an input type button, but 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>