Struggling to place a glyphicon inside input tags? Despite trying multiple codes from various sources, I still can't seem to make it work. Here's 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>
Here is the CSS code I have been using:
/* positioning adjustments */
.inner-addon {
position: relative;
}
/* styling for glyph */
.inner-addon .glyphicon {
position: absolute;
padding: 10px;
pointer-events: none;
}
/* alignment of glyph */
.left-addon .glyphicon { left: 0px;}
.right-addon .glyphicon { right: 0px;}
/* adding padding around input fields */
.left-addon input { padding-left: 30px; }
.right-addon input { padding-right: 30px; }
However, I keep encountering this strange symbol outside the input field:
https://i.sstatic.net/5IYv5.jpg I am trying to follow Bootstrap documentation and place the glyphicon within an alert box:
if( $errors !== ""){
echo '<div class="alert alert-danger">';
echo '<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>';
echo $errors;
echo '</div>';
}
Despite following the guidelines, a weird symbol continues to appear: https://i.sstatic.net/gIBxO.jpg