CODEWITHSUNDEEP
html
Nag
Nag

Reputation: 956

Font Awesome icon in input placeholder not working

I am trying to use Font Awesome icons in the input placeholder.

I tried this but not working. 

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

What’s wrong with this? I am getting some weird number in the placeholder instead of icon.

Upvotes: 3

Views: 8535

Answers (3)

Dmitry Zakharov
Dmitry Zakharov

Reputation: 248

You can also use an icon outside of placeholder, placed with HTML. Here is my solution:

HTML
<i class="fas fa-search form__icon"></i>
<input type="text" name="search" class="form__input" placeholder="      Search">

CSS
.form__icon {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
.form__input {
  position: relative;
  z-index: 3;
}
.form__input:placeholder-shown {
  z-index: 1;
}

It's a bit complex, but it also give a possibility to use animated, rotated and flipped icons.

Check my CodePen: https://codepen.io/dzakh/pen/YzKqJvy

Upvotes: 3

iuliu.net
iuliu.net

Reputation: 7145

When you try to use a font icon and what you get is some weird character, this is probably due to the fact that the browser tries to render that icon with a wrong font. Check what your input's font-family is when rendered by inspecting the element, and then going into the 'Computed' tab (Chrome: Right click -> Inspect Element -> Computed). If it's not font-awesome, but you think you set it, try to use font-family: FontAwesome !important;. This will override any of the possible input's parrent font-family setting.

Upvotes: 1

devpro
devpro

Reputation: 16117

You can add font awesome icon as like that 

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

you can also check out the fiddle Fiddle click here

Upvotes: 10

Related Questions