I'm trying to use an icon from FontAwesome in the placeholder of an input field.
Here is my code snippet:
<input type="password" name="password" placeholder=" Password">However, when I view it on the screen, it appears as "Passw rd".
Interestingly, if I change the placeholder text to
 PasswardUpdate:
@font-face {
font-family: FontAwesome;
src:url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.eot?#iefix) format('eot'),
url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.woff) format('woff'),
url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.ttf) format('truetype'),
url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.svg#FontAwesome) format('svg');
font-weight:400;font-style:normal;
}
Including the code above results in the disappearance of the letter 'o' in the placeholders.
JSFIDDLE Link: http://jsfiddle.net/9HkRt/