css tricks for font awesome in placeholder for chrome

1.3k views Asked by At

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;
}
2

There are 2 answers

1
Ethereal soul On BEST ANSWER

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.

0
JDTLH9 On

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