Estou tento dificuldade para utilizar fot awesome
Encontrei na internet esse exemplo: http://astronautweb.co/snippet/font-awesome/
porém não estou conseguindo resolver este problema
meu HTML e CSS está da seguinte forma porém os icones aparecem como "pequenos blocos".
@font-face {
font-family: 'FontLogin';
src: url("../css/fonts/VarelaRound-Regular.otf");
}
html{
font-family: 'FontLogin', sans-serif;
}
.label_name,
.label_mail,
.label_pass {
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.label_name:before,
.label_mail:before,
.label_pass:before {
position: absolute;
right: 5px;
top: 10px;
transition: color 0.4s cubic-bezier(1, 0, 0, 1);
}
.label_name:before {
/*content: "\f007";*/
}
.label_mail::before {
content: "\f0e0";/*\f0e0*/
}
.label_pass:before {
content: "\f023";
}
.forgotPass {
text-decoration: none;
color: #808080;
}
.action_singUp .input,
.action_login .input {
font-family: 'FontLogin', sans-serif;
width: 100%;
padding-bottom: 5px;
margin-bottom: 10px;
border: 0;
border-bottom: 2px solid #c1c4d6;
background-color: transparent;
line-height: 32px;
font-size: 13px;
}
.action_singUp .input:hover,
.action_login .input:hover,
.action_singUp .input:focus,
.action_login .input:focus,
.action_singUp .input:active,
.action_login .input:active {
outline: 0;
}
.action_singUp .input_block,
.action_login .input_block {
margin: 35px 0;
}
.action_singUp {
top: 100px;
left: 100px;
}
.input_wrap {
position: relative;
}
.input + label:after {
content: '';
position: absolute;
bottom: 10px;
left: 0;
height: 2px;
width: 0;
background-color:#4169E1; background: linear-gradient(to right,#63B8FF 0%, #4169E1 100%);/*Color Line*/
transition: width 0.4s cubic-bezier(1, 0, 0, 1);
}
.input:invalid + label:after {
background-color:#FF0000; background: linear-gradient(to right,#F08080 0%, #FF0000 100%);/*Color Line*/
transition: width 0.4s cubic-bezier(1, 0, 0, 1);
}
.input:focus + label:after {
width: 100%;
}
.input:focus + label:before {
color: #4169E1;/*Color icon*/
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>particles.js</title>
<meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
<meta name="author" content="Vincent Garreau" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" media="screen" href="css/style.css">
<link rel="stylesheet" media="screen" href="css/login.css">
<link rel="stylesheet" type="text/css" href="css/ForgotPassword.css">
</head>
<div id="main" class="login_wrap loginActive">
<div class="login_question_wrap">
<div id="root" class="action_login">
<form action="#">
<fieldset>
<legend class="title"><span class="lang" key = "LogIn">SING IN</span></legend>
<div class="input_block">
<div class="input_wrap">
<input type="email" id="mail" class="input" placeholder="Email">
<label for="mail" class="label_mail"></label>
</div>
<div class="input_wrap">
<input type="password" id="pass" class="input" placeholder="Password">
<label for="pass" class="label_pass"></label>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<div class="login_action_wrap ">
</div>
</div>
</body>
</html>
head
do seu site? parece que não tem nada dentro? Se ver ele não da para te responder direito... Vc abriu o DevTools do browser para ver se está apresentado algum erro no console? Tipo 404 por não ter carregado a fonte?