[html] Use Font Awesome Icon in Placeholder

Is it possible to use Font Awesome Icon in a Placeholder? I read that HTML isn't allowed in a placeholder. Is there a workaround?

placeholder="<i class='icon-search'></i>"

This question is related to html font-awesome placeholder

The answer is


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

_x000D_
_x000D_
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>_x000D_
_x000D_
<input type="text" placeholder="&#xF002; Search" style="font-family:Arial, FontAwesome" />
_x000D_
_x000D_
_x000D_

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).


Similar questions with html tag:

Similar questions with font-awesome tag:

Similar questions with placeholder tag: