html - 输入和警报内部的字形

Question

你好，我很难尝试在输入标签中放置一个字形图标，我已经尝试了来自这里和其他站点的几个代码，但仍然无法得到它。这就是我所拥有的:

<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>

这是我的 CSS 文件:

/* 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; }

但是我一直在输入之外得到这个奇怪的符号:

并按照 Bootstrap 文档，我正在尝试在警告框中实现字形图标:

if( $errores !== ""){
    echo '<div class="alert alert-danger">'; 
    echo '<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>';
    echo $errores; 
    echo '</div>';
}

但奇怪的符号又出现了:

Answer 1

只需使用这个(不需要额外的 css):

<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>