I wanted to add a Font Awesome icon to an
<input type="file"> field.
This is a private project that will only be used with WebKit browsers (e.g. Chrome or Mobile Safari), so I have not considered cross-browser compatibility or fallbacks.
Keeping in mind that I only cared about WebKit browsers, I simply did this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
So the file upload button gets padding to make room for the icon.
Then the icon is absolutely positioned within the file field (couldn’t get it to work within the upload button).
If you use font-awesome-sass in a Ruby/Rails project, you can even use its variables:
1 2 3 4 5 6 7 8
Just make sure to import the lib with
@import "font-awesome"; and not
//= require font-awesome in your
application.scss. Otherwise the variables will not be available.