Use Font Awesome Icon in Placeholder

by

If you’re using FontAwesome 4.7 this should be enough:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<input type="text" placeholder="&#xF002; Search" style="font-family:Arial, FontAwesome" />

A list of hex codes can be found in the Font Awesome cheatsheet. However, in the lastest FontAwesome 5.0 this method does not work (even if you use the CSS approach combined with the updated font-family).

More Related Contents:

  1. How do I make a placeholder for a ‘select’ box?
  2. Font Awesome 5 on pseudo elements shows square instead of icon
  3. Li item on two lines. Second line has no margin
  4. How to center text vertically with a large font-awesome icon?
  5. How to support placeholder attribute in IE8 and 9
  6. Use Font Awesome icon as CSS content
  7. Font Awesome icon inside text input element
  8. Not showing placeholder for input type=”date” field
  9. Can you have multiline HTML5 placeholder text in a ?
  10. I can’t get my font-awesome icons to show up. Tried importing css with multiple methods
  11. How do I add a Font Awesome icon to input field?
  12. Font Awesome icons are not working, I have included all required files [closed]
  13. Extracting SVG from Font Awesome
  14. text-align: right; only for placeholder?
  15. Font awesome is not showing icon
  16. How to set placeholder value using CSS?
  17. How to change the inner white color of Font Awesome’s exclamation triangle icon?
  18. Can I change the color of Font Awesome’s cog icon?
  19. How to vertically align text with icon font?
  20. HTML5 placeholder disappears on focus
  21. Font Awesome & Unicode
  22. How to avoid joining all text from Nodes when scraping
  23. Line Break in HTML Select Option?
  24. How to specify a local file within html using the file: scheme?
  25. Conditional HTML Attributes using Razor MVC3
  26. Pure css Chessboard with div & no classes or ids, is it possible?
  27. Is there a way to force browsers to refresh/download images?
  28. Insert HTML from CSS
  29. z-index and iFrames!
  30. Random Querystring to avoid IE caching

Leave a Comment