Search code examples
javascripthtmlreactjsreduxplaceholder

How can I use React icons in Placeholder?

Is it possible to use React icons in placeholder attribute of input field i-e input text for example?

If yes can some one give me an example?

I do it like this but instead of Icon I got [object object] in placeholder

var  emailIcon = <FaEnvelopeO  size={10}  />;
<Field
 placeholder={emailIcon}
 name="email"
 type="text"
 component={this.renderField}
/>
Solution

  • Nope, placeholders are meant to contain text only. Look at the definition below:

    The placeholder attribute places text inside the input in a light gray color. The text remains whenever the input has no value.

    You can however use hexcodes like below:

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