css - How do I add a Font Awesome icon to file input field -

i have file input button, instead of browse want show font awesome upload icon there whatever tried nothing gave me result.

here i've tried:

.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 */  }

<div class="container">    <span class="select-wrapper">      <input type="file" name="image_src" id="image_src" />    </span>  </div>

by above code picture instead of browse button, want use font awesome icon.

you hide file input display: none , create custom button or in case font-awesome icon trigger input. can use span display input's value change on input value change.

$("i").click(function () {    $("input[type='file']").trigger('click');  });    $('input[type="file"]').on('change', function() {    var val = $(this).val();    $(this).siblings('span').text(val);  })

.element {    display: inline-flex;    align-items: center;  }  i.fa-camera {    margin: 10px;    cursor: pointer;    font-size: 30px;  }  i:hover {    opacity: 0.6;  }  input {    display: none;  }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="element">    <i class="fa fa-camera"></i><span class="name">no file selected</span>    <input type="file" name="" id="">  </div>