title: Bootstrap & CSS - Input button background image(icon size)
body: <p>I have a login screen with two input boxes and a button. I would like to put an background icon in each. For this I use css styles.</p>
  
  <p>Now I have a background image in the input boxes but I have a problems with the size, it's very large to input box.</p>
  
  <p>Code:</p>
  
  <pre><code>.btn {
      /*font-family: Gotham-Medium; Si activem no surten les icones */
      padding: 3px 6px;
      -webkit-transition: all 0.3s;
         -moz-transition: all 0.3s;
              transition: all 0.3s;
      background-color: #636363;
      color: #fff;
      border-radius: 0;
      border-color: #fff;
      font-size: large;
  }
  .btn-group {
      font-family: Gotham-Medium;
  }
  .pull-left {
       padding-right: 5px;            /* Distancia separación entre botones toolbar. */
  }   
  .btn-addcom{
       background-color: #009fe3;
       font-size: medium !important;
       font-family: Gotham-Medium !important;
  }
  .img-logo-login {
      width: 223px;
      height: 194px;
  }
  
  /* LOGIN */
  
  .login-user{
      width: 223px;
      text-align: center; 
      background: url('../../assets/images/login-user-black.png') no-repeat scroll 2px 2px;
      padding-left: 30px; 
  }
  .login-pass{
      width: 223px;
      text-align: center; 
      background: url('../../assets/images/login-pass-black.png') no-repeat scroll 3px 3px;
      padding-left: 30px;     
  }
  .login-button{
      padding: 3px 6px;
      width: 223px;
      text-align: center;
      background-image: url('../../assets/images/login.png') no-repeat scroll 3px 3px;
      padding-left: 30px;         
  }
  
  input{
      padding: 3px 6px;
      font-family: Gotham-Medium;
      background-color: #fff !important;
      color: #636363 !important;
      border: 0 !important;
      border-bottom: 2px solid #dddddd !important;
  }
  
  /* FOOTER */
  
  footer {
      position: fixed;
      height: 75px;
      bottom: 0;
      width: 100%;
  }
  
  &lt;div class="container-fluid"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-12 text-center"&gt;
                  &lt;img class="img-logo-login" src="assets/images/Logo ADDcloud300-2.jpg"/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;form action="connect_start.php" method="post"&gt;
              &lt;div class="row"&gt;   
                  &lt;div class="col-md-12 text-center"&gt;
                      &lt;input type="text" class="login-user" placeholder="USUARI" name="username" required autofocus&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;   
                  &lt;div class="col-md-12 text-center"&gt;
                      &lt;input type="password" class="login-pass" placeholder="PASSWORD" name="password" required&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;   
                  &lt;div class="col-md-12 text-center"&gt;
                      &lt;button class="btn btn-addcom login-button" type="submit" style="width: 223px;"&gt;LOGIN&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;               
          &lt;/form&gt;
  </code></pre>
  
  <p>Screenshot:</p>
  
  <p><a href="https://i.stack.imgur.com/P0x4U.png" rel="nofollow"><img src="https://i.stack.imgur.com/P0x4U.png" alt="enter image description here"></a></p>
  
  <p>Could you help me please?</p>