Glyphicon on textbox disappears when selected - html

Question

I was attempting to make a contact form for my site, which can be previewed here.
I used the Bootstrap Validator script to add verification icons/checks. However, when a textbox is selected that is used with the script, the validation icon disappears, like this:
This happens with the other boxes as well (except for the Subject box, which I didn't activate the validation script for.) How would I fix this? It worked on CodePen, but not on my site.
Here's the HTML for the page.
HTML and CSS for just the form:
<div class="container">
<form class="well form-horizontal" action="https://formspree.io/example#example.com" method="post" id="contact_form">
<fieldset>
<!-- Form Name -->
<legend>Contact Me</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Name <label class="text-danger">*</label></label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input name="name" placeholder="Name" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Email <label class="text-danger">*</label></label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input name="email" placeholder="Email Address" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Subject</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-comment"></i></span>
<input name="_subject" placeholder="Subject" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text area -->
<div class="form-group">
<label class="col-md-4 control-label">Message <label class="text-danger">*</label></label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-pencil"></i></span>
<textarea class="form-control" name="input" placeholder="Message"></textarea>
</div>
</div>
</div>
<!-- Config -->
<input type="hidden" name="_next" value="/contactthanks.html" />
<!-- Required fields text -->
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4">
<div class="text-danger">* Required field</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4">
<button type="submit" class="btn btn-primary"><span class="fa fa-send"></span> Send</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
textarea {min-height:50px; resize:vertical;}
Thanks in advance, and sorry for the long question.

Answer 1

Using Chrome Developer tools, you can see that adding the :focus pseudo-class to the element increases the z-index value of the <input /> to 3, while the .form-control-feedback class maintains a z-index of 2.
Adding this selector appears to resolve it:
input:focus ~ .form-control-feedback {
z-index: 3;
}
However, my guess is that this is the intended behavior in Bootstrap so the icon does not get in the way while the user is typing.

Answer 2

.input-group .form-control:focus {
z-index: 3;
}
When you select an input, its icon goes behind cos of input's z index. Maybe try changin it ?