Font Awesome's unicode not working in fixed placeholder

Question

I followed this question to have a placeholder at the end of the input which doesn't disappear when filling it (cf Airbnb's login modal for example).

However, I used Font Awesome's unicode and added a font family attribute but it doesn't work:

.email-container {
   width:100%;
    position: relative;
    float: left;
}

.email-container:after {
    position: absolute;
    right: 5px;
    color:#999999;
    top: 10px;
    content: '';
    font-family: FontAwesome;
}

I have  at the end of the line I'm trying to add the fa-envelope icon. Where did I miss something ?

Answer 1

You have incorrect unicode charater notation. For CSS you should replace &#x with simple backslash \. Also ; at the end should be removed.

Here's the change you should do:

 => \f0e0

Try this:

.email-container:after {
    position: absolute;
    right: 5px;
    color:#999999;
    top: 10px;
    content: '\f0e0'; // <-- changed line
    font-family: FontAwesome;
}

Answer 2

try this

content: " ("&#xf0e0")";