0

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 ?

Community
  • 1
  • 1
Graham Slick
  • 6,692
  • 9
  • 51
  • 87
  • Which icon you trying to use ? – Peter Wilson Mar 07 '16 at 10:48
  • Edited it: I want the fa-envelope icon. It does exist:  fa-envelope [] Are brackets necessary ? I've previously used Font Awesome's unicodes without it and it worked. https://fortawesome.github.io/Font-Awesome/cheatsheet/ – Graham Slick Mar 07 '16 at 10:50

2 Answers2

3

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;
}
Jakub Matczak
  • 15,341
  • 5
  • 46
  • 64
  • Worked, thanks ! However: when should I use this notation and not the one provided in their cheat sheet ? I've used the '' notation before and it worked fine. – Graham Slick Mar 07 '16 at 10:52
  • 1
    `` is a HTML entity. So you can use it when you place this char directly in HTML. More about HTML entities: http://www.w3schools.com/html/html_entities.asp – Jakub Matczak Mar 07 '16 at 10:54
0

try this

content: " ("&#xf0e0")";
Matheno
  • 4,112
  • 6
  • 36
  • 53
Padma Rubhan
  • 293
  • 3
  • 16