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=" User name(*)" name="username"></input><br>
<input type="password" placeholder=" Password(*)" name="password"></input><br>
<input type="text" placeholder=" First name(*)" name="first_name"></input><br>
<input type="text" placeholder=" 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=" E-mail(*)" name="email"></input><br>
<input type="text" placeholder=" 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;
}
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
but when i converted it to this :
it worked for me in the chrome.