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

Question

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.

Here is what I\'ve tried

Answer 1

You could hide file input with display: none and create custom button or in this case font-awesome icon that will trigger input. Also you can use span to display input's value that will 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;
}

  No file selected