title: How do I add a Font Awesome icon to file input field
body: <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>