Font Awesome Implementation into ASP.NET TextBox Server Control - css

Question

http://www.petcenters.com/painting-estimate is a test page with Bootstrap enabled ASP.NET Controls utilizing CssClass Selector.
I have attempted to implement Font Awesome Classes into ASP.NET TextBox Controls following guidelines illustrated within:
Bootstrap Documentation
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">#example.com</span>
</div>
A Bootstrap Template that I'm using shows their implementation of: Font Awesome with HTML Form Tags
<section class="col col-6">
<label class="label">Company</label>
<label class="input">
<i class="icon-append fa fa-envelope-o"></i>
<input type="text" name="company" id="company">
</label>
</section>
I have attempted to replicate with both scenarios for ASP.NET Textbox Server Control.
<div class="input-group col-md-6 clearfix">
<label for="txtGenCompany">Company</label>
<asp:TextBox ID="txtGenCompany" name="company" CssClass="form-control" aria-describedby="addon1" placeholder="Enter Company" runat="server" TabIndex="2"></asp:TextBox>
<span class="input-group-addon" id="addon1">
<i class="icon-append fa fa-envelope-o"></i>
</span>
</div>
I believe I'm missing something with either "span" or "i" Company TextBox
If anyone has any idea I would appreciate it.

Answer 1

what you need is
HTML
<div class="input-group input-group-md">
<lable>Company</lable>
<asp:TextBox ID="txtGenCompany" name="company" CssClass="form-control" aria-describedby="addon1" placeholder="Enter Company" runat="server" TabIndex="2"></asp:TextBox>
<span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
</div>
CSS
lable {
display: table-caption;
white-space: nowrap;
}
.input-group {
padding-bottom: 20px;
}
PS: It's not good to have too many visual guides for getting input,
here we have 3:
the lable
the placeholder
the font-awesome icon
try to reduce them if you can.