css tricks for font awesome in placeholder for chrome

Question

can any one tell me why my font awesome is not working properly in chrome though its working fine with firefox?but if i remove the awesome font then it becomes ok again.click here to see the image

here is the html code for my form :

    <!DOCTYPE html>
<html>
<head>
    <title>Student-login</title>
    <link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
</head>
<body>
    <div class="body"></div>
        <div class="main-form">
            <h1>Student Registration</h1>
            <form class="login" name="register" action="database.php" method="post">
                <input type="text" placeholder="&#xf007; User name(*)" name="username"></input><br>
                <input type="password" placeholder="&#xf023; Password(*)" name="password"></input><br>
                <input type="text" placeholder="&#xf040; First name(*)" name="first_name"></input><br>
                <input type="text" placeholder="&#xf040; Last name(*)" name="last_name"></input><br>
                <select name="gender">
                    <option value="">Gender</option>
                    <option value="male">Male</option>
                    <option value="female">Female</option>
                </select><br>
                <input type="text" placeholder="&#xf0e0;  E-mail(*)" name="email"></input><br>
                <input type="text" placeholder="&#xf095; Phone number(*)" name="phone"></input><br>
                <div class="button"><a href="login.html">Login <i class="fa fa-arrow-circle-right"></i></a></div>
                <input type="submit" value="Submit" name="btnsubmit"></input>

            </form>
        </div>
</body>
</html>

here is the css:

    .body{

    position: absolute;
    top:0px;
    left: -10px;
    right: 0px;
    bottom: 0px;
    width: auto;
    height: auto;
    background-image: url("background.jpg");
    background-size: cover;
    -webkit-filter: blur(5px);
    filter:blur(5px);
    z-index: 0;
}
h1{
    font-family: 'Shadows Into Light', cursive;
    color: #282828;
    text-align: center;
    margin: 2%;
}
.main-form{
    float: right;
    margin-top: 3%;
    height:auto;
    border-radius: 3px;
    background:#F0F0F0;
    opacity: .6;
    padding-top: 1%;
    padding-left: 4%;
    padding-right: 4%;
    padding-bottom: 1%;
    position: relative;
    z-index: 1;
}
.login input[type="text"]{

    width: 260px;
    height: 35px;
    border-radius: 2px;
    border: 1px solid #505050 ;
    background: transparent;
    margin: 2%;
    font-family:FontAwesome;
}
.login input[type="text"]:focus{

    border: 1px solid #0033FF;
}

.login input[type="password"]{

    width: 260px;
    height: 35px;
    border-radius: 2px;
    border: 1px solid #505050 ;
    background: transparent;
    margin: 2%;
    font-family:FontAwesome;
}
.login input[type="password"]:focus{

    border: 1px solid #0033FF;
}

.login input[type="button"]{

    width: 265px;
    height: 35px;
    border-radius: 2px;
    border: 1px solid #505050 ;
    background: transparent;
    margin: 2%;
    font-family: 'Shadows Into Light', cursive;
    font-size: 100%;
    font-weight: bold;
}
.login input[type="button"]:hover{

    background-color: #404040;
    color: white;
}
.login input[type="submit"]{

    width: 265px;
    height: 35px;
    border-radius: 2px;
    border: 1px solid #505050 ;
    background: transparent;
    margin: 2%;
    font-family: 'Shadows Into Light', cursive;
    font-size: 100%;
    font-weight: bold;
}
.login input[type="submit"]:hover{

    background-color: #404040;
    color: white;
}
.button {

    width: 270px;
    height: 35px;
    border-radius: 2px;
    border: 1px solid #505050 ;
    background: transparent;
    margin: 2%;
    font-family: 'Shadows Into Light', cursive;
    font-size: 100%;
    font-weight: bold;
    text-decoration: none;
    color:black;
    text-align: center;
}
.button a{

    font-family: 'Shadows Into Light', cursive;
    font-size: 100%;
    font-weight: bold;
    text-decoration: none;
    color:black;
    text-align: center;
}
.button:hover{

    background-color: #404040;
}
.button:hover a{

    color: white;
}

.login select{

    width: 265px;
    height: 35px;
    border-radius: 2px;
    border: 1px solid #505050 ;
    background: transparent;
    margin: 2%;
    font-family: 'Shadows Into Light', cursive;
    font-size: 100%;
    font-weight: bold;
}
.login select:hover{

    background-color: #404040;
    color: white;
}
::-webkit-input-placeholder {
    color: red;
    opacity: .8 !important;
}
:-moz-placeholder { /* Firefox 18- */
    color: red;  
    opacity: .8 !important;
}

::-moz-placeholder {  /* Firefox 19+ */
    color: red;  
    opacity: .8 !important;
}

:-ms-input-placeholder {  
    color: red;  
    opacity: .8 !important;
}

Does Chrome support HTML entities in `placeholder`? Feels like it shouldn't. — Paulie_D, Jun 15 '15 at 19:40
Possibly related - http://stackoverflow.com/questions/19350291/use-font-awesome-icon-in-placeholder — Paulie_D, Jun 15 '15 at 19:44
so it doesnt support the html entities in placeholder?[error link](https://productforums.google.com/forum/#!topic/chrome/Hz43OKP74DM)@Paulie_D — Ethereal soul, Jun 15 '15 at 19:44
I'm not saying it doesn't...just that it feels like it shouldn't. — Paulie_D, Jun 15 '15 at 19:45
i have read some answers from stackoverflow they are saying its working fine with both chrome ,safari and firefox but has some issue with IE but in my case its working for firefox and not with chrome .have you checked the screenshot i posted?@Paulie_D — Ethereal soul, Jun 15 '15 at 19:49

score 1 · Answer 1 · edited May 23 '17 at 12:05

1

Please try adding an inline style for the fonts you would like to use. Example:

<input type="text" placeholder="&#xf007; User name(*)" name="username" style="font-family:Arial, FontAwesome"></input>

There is more on this approach from a thread asking a similar question here

edited May 23 '17 at 12:05

Community

1
1

answered Jun 15 '15 at 19:52

JDTLH9

1,765
1
23
34

score 1 · Accepted Answer · answered Jun 15 '15 at 20:00

1

Thanks @JDTLH9 for giving me a clue for the problem .actually you dont have to use inline style but in the previous design i was using

{font-family:fontawesome};

but when i converted it to this :

{font-family:Arial,fontawesome}

it worked for me in the chrome.

answered Jun 15 '15 at 20:00

Ethereal soul

709
1
7
20

Glad this helped! Yes you are right changing the style sheet will solve this too. It was the Arial font just needed to be added :) – JDTLH9 Jun 15 '15 at 22:35

css tricks for font awesome in placeholder for chrome

2 Answers2