fontawesome user in placeholder

Question

How To Put fontawesome in placeholder. Here is my code:

<div class="form-group">         
    <input class="form-control" placeholder="username" id="inputdefault" type="text" />
    <input class="form-control" placeholder="password" id="inputdefault" type="text" />
</div>

A possible workaround https://stackoverflow.com/a/36808965/2375207 — nicolallias, Nov 10 '17 at 08:45

All about JS · Accepted Answer · 2017-11-10T08:52:22.153

3

Try this way:

input {
  padding:10px;
 font-family: FontAwesome;
   
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<form role="form">
  <div class="form-group">
    <input type="text" class="form-control empty" id="iconified" placeholder="&#xf2ba">
  </div>
</form>

edited Nov 10 '17 at 08:52

answered Nov 10 '17 at 08:43

All about JS

562
2
10

do I need to import something – Ephraim Nov 10 '17 at 08:48
@Ephraim just your font awesome library you need to include which is expected. Here I have included font awesome CDN link. That's it. – All about JS Nov 10 '17 at 08:49
@Ephraim have you added the CSS which I have given ? `font-family: FontAwesome;` – All about JS Nov 10 '17 at 08:50
@Ephraim box is coming because you have not included the font-awesome in `font-family` which can be done by the CSS I have provided. – All about JS Nov 10 '17 at 08:51
@Ephraim Welcome :) – All about JS Nov 10 '17 at 08:53

score 0 · Answer 2 · answered Nov 10 '17 at 08:42

0

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

A list of hex codes can be found in the Font Awesome cheatsheet.

answered Nov 10 '17 at 08:42

Calvin Ananda

1,440
1
14
30

fontawesome user in placeholder

2 Answers2