glyphicons inside inputs and inside alerts - html

Question

Hello I'm having a hard time trying to put a glyphicon inside input tags, I've tried several codes from here and other sites but still can't get it..
this is what I have:
<div class="form-group">
<label for="cedula">Cedula:</label>
<div class="inner-addon left-addon">
<i class="glyphicon glyphicon-user"></i>
<input type="text" class="form-control" id="cedula" name="cedula" placeholder="Numero De Cedula" required="true" autofocus="true" maxlength="9">
</div>
</div>
and this is my css file:
/* enable absolute positioning */
.inner-addon {
position: relative;
}
/* style glyph */
.inner-addon .glyphicon {
position: absolute;
padding: 10px;
pointer-events: none;
}
/* align glyph */
.left-addon .glyphicon { left: 0px;}
.right-addon .glyphicon { right: 0px;}
/* add padding */
.left-addon input { padding-left: 30px; }
.right-addon input { padding-right: 30px; }
BUT I keep getting this weird symbol outside the input:
and following the Bootstrap documentation I'm trying to implement the glyphicon inside the alert box:
if( $errores !== ""){
echo '<div class="alert alert-danger">';
echo '<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>';
echo $errores;
echo '</div>';
}
but again weird symbol appears:

Answer 1

Just use only this (no additional css needed):
<div class="form-group has-feedback">
<label class="control-label" >Cedula:</label>
<input type="text" class="form-control" id="cedula" name="cedula" placeholder="Numero De Cedula" required="true" autofocus="true" maxlength="9">
<i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>

Answer 2

use this one:
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-user" ></i></span>
<input type="text" class="form-control" id="cedula" name="cedula" placeholder="Numero De Cedula" required="true" autofocus="true" maxlength="9">
</div>