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

Since you are using Bootstrap - if you are open to using a small plug-in, there is one that will do what you want. The plug-in is Bootstrap Filestyle - http://markusslima.github.io/bootstrap-filestyle/.

All you have to do is add a few attributes to your input and download/include the plug-in's JS after Bootstrap's JS.

Your font-awesome icon class will go in data-iconName and your verbiage will go in data-buttonText.

Additionally, you can add or remove the text input portion with data-input. True to show it and false (as in the demo below) to hide it.

Working Demo Here