placeholder and text over the icon of a input

Question

i'm creating a form and I want to put an icon into the input text, but when it comes to preview the text is put over the icon and I don't know how to fix it

the html looks like this

 <div id="name"> <input type="text" name="username" placeholder="Nombre"> </div>

and the css as well

#name{
    float:left;
}
#name input {
  font:'Montserrat', sans-serif;
  font-weight:700;
  font-size:24px;
  border-radius: 2.5px;
  border: 5px solid #000;
  background-color:transparent;
  color:#56828B;
  width:300px;
  height:30px;
  background-image:url(../imgs/nameicon.png);
  background-repeat:no-repeat;
}

::-webkit-input-placeholder {
   color:#56828B;
   padding-left:5px;
}

thanks

Answer 1

You actually do not need an image for that. Try the method below and the problem will never occur again:

 #name { font:'Montserrat', sans-serif; font-weight:700; font-size:24px; border-radius: 2.5px; border: 5px solid #999; color:#56828B; width:240px; height:30px; background-repeat:no-repeat; position: relative; padding-left: 50px; /* makes space for the icon */ } #name:after { content: '\\f095'; font-family: fontAwesome; position: absolute; left: 8px; top: 5px; font-size: 20px; color: #999 } input:focus, input:active { outline: 00; } #name input { border: none!important; width: 100%; background-color:transparent; color:#56828B; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> <div id="name"> <input type="text" name="username" placeholder="Nombre"> </div> 

Note: This is just an example, adjust to suit your needs.

See this tutorial here