Written August 2, 2014. Tagged CSS.
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:
padding: 6px 10px; /* Make it pretty. */
/* …other prettification like background color… */
/* Make room for icon. */
/* http://fortawesome.github.io/Font-Awesome/icon/picture-o/ */
padding: 6px 10px; /* NOTE: Same padding as on the upload button. */
line-height: 21px; /* Magic number :/ Modify this until it looks good. */
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:
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.