Font Awesome icon in input placeholder not working
Question
I am trying to use Font Awesome icons in the input placeholder.
I tried this but not working.
<body>
<input type="text" placeholder="" style="font-family:FontAwesome"/>
</body>
What's wrong with this? I am getting some weird number in the placeholder instead of icon.
3 answers
solution1
6 2016-01-16 05:39:36
You can add font awesome icon as like that
<input type="text" placeholder="" style="font-family:Arial, FontAwesome" />
you can also check out the fiddle Fiddle click here
solution2
0 2016-01-16 14:52:35
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.
solution3
0 2019-08-16 08:34:05
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.