How to use font awesome icon with bootstrap and large fonts

Question

I am creating a screen to a kiosk/totem machine and I need to use large fonts.

I have a problem using input group with font awesome icons and alignment.

As I use large fonts, I had to add a 'margin-top:10px' to align the input to your label. The side effect is that the awesome icon becomes misaligned on top.

Fiddle: http://jsfiddle.net/vb0xo8wb/

//markup

<div class="container">
   <div class="row">
      <div class="col-sm-12">
            <div class="col-sm-12 form-container">
               <form class="form form-horizontal" name="regForm" autocomplete="false" novalidate="" role="form">
                  <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
                        <div class="col-sm-12">
                           <div class="row">
                              <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
                                 <div class="form-group">
                                    <label class="col-sm-2 control-label">Nome</label>
                                    <div class="col-sm-10 recuo">
                                       <div class="input-group">
                                          <span class="input-group-addon">
                                          <i class="fa fa-user fa-2x bg-info"></i>
                                          </span>
                                          <input take-focus="" type="text" class="form-control input-lg" name="user_name" required="" placeholder="Digite seu nome">
                                       </div>

                                    </div>
                                 </div>
                              </div>
                    </div>
                </div>
 </div>

//css

@import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css');
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300ita‌​lic,400italic,500,500italic,700,700italic,900italic,900);
html, html * {
  font-family: Roboto;
}

form label {
    font-size: 28px !important;
}


form input, form textarea, form select {
    margin-top:10px;
    font-family: Roboto;
    font-weight: bold;
}

.recuo{
  padding-left:30px;
}

.fonte_big {
    font-size: 28px !important;
}



.form-container {
  background-color: rgba(0, 0, 0, 0.6);
  padding: 20px;
  margin-top:50px;
}

Answer 1

Adding

.input-lg {
  margin: 0 !important;
}

should fix the issue.