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

Question

How do I use the search icon included in Font Awesome for input? I have a search feature on my site (based on PHPmotion), that I want to use for the search.

Here\'s

Answer 1

Similar to the top answer, I used the unicode character in the value= section of the HTML and called FontAwesome as the font family on that input element. The only thing I'll add that the top answer doesn't cover is that because my value element also had text inside it after the icon, changing the font family to FontAwesome made the regular text look bad. The solution was simply to change the CSS to include fallback fonts:

font-family: FontAwesome, Roboto, sans-serif;

This way, FontAwesome will grab the icon, but all non-icon text will have the desired font applied.