How do I add a Font Awesome icon to file input field
<p>I have a file input button, instead of browse I want to show Font Awesome upload icon there but whatever I tried nothing gave me result.</p>

<p><strong>Here is what I've tried:</strong></p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.select-wrapper {
  background: url(http://s10.postimg.org/4rc0fv8jt/camera.png) no-repeat;
  background-size: cover;
  display: block;
  position: relative;
  width: 33px;
  height: 26px;
}
#image_src {
  width: 26px;
  height: 26px;
  margin-right: 100px;
  opacity: 0;
  filter: alpha(opacity=0); /* IE 5-7 */
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  &lt;span class="select-wrapper"&gt;
    &lt;input type="file" name="image_src" id="image_src" /&gt;
  &lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>By above code I only get a picture instead of browse button, but I want to use Font Awesome icon.</p>