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

There's another way you can handle this scenario using just CSS and FontAwesome. If you go to FontAwesome's website and look at the examples, I'm going to use "fa fa-asterisk" for this example, you will notice once you click the icon and it takes you to the page, it will give you a UNICODE value for the fontawesome icon. For example the UNICODE value for asterisk is "f069".

This being the case, you can use the "after or before" pseudo class in your CSS like so:

[input]#img_src::before {
font-family: 'FontAwesome';
content: '\f069'
}

This will place a fontawesome asterisk BEFORE (in this case) any input button text. If you want the button to only show the icon, simply don't enter any input text and just use the pseudo classes to handle the distribution of the fontawesome icons using only CSS.

Hope this helps.