Add Font Awesome Icon inside input
<p>I try the possible solutions posted here with this problem but no one works with my code, this is what I have </p>

<pre><code>&lt;div class="search"&gt;
  &lt;span class="fa fa-user"&gt;&lt;/span&gt;
  &lt;input placeholder="Username..."&gt;
&lt;/div&gt;
&lt;div class="search"&gt;
   &lt;span class="fa fa-lock"&gt;&lt;/span&gt;
   &lt;input placeholder="*******"&gt;
&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
body { margin: 30px; }
.search {
   position: relative;
   color: #aaa;
   font-size: 16px;
}
.search input {
  width: 250px;
  height: 32px;
  background: #fcfcfc;
  border: 1px solid #aaa;
  border-radius: 5px;
  box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;
}
.search input { text-indent: 32px;}
</code></pre>

<p>I want the icon before the placeholder.</p>

<p><a href="http://codepen.io/anon/pen/oLLxqZ" rel="nofollow">Here its the example code</a></p>