0

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>

4
  • Cade o 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?
    – hugocsl
    Commented 22/08/2019 às 22:06
  • @hugocsl olá acabei de acrecentar o head Commented 22/08/2019 às 22:11
  • não aparece nenhum erro Commented 22/08/2019 às 22:13
  • 1
    Cara mas não tem o FontAwesome indexado nem no seu HTML, nem no seu CSS, como vc quer que ele apareça?
    – hugocsl
    Commented 22/08/2019 às 22:43

1 Resposta 1

1

Adiciona o CDN do FontAwesome no seu header. Lá pelo site você consegue o link que usei no meu heade.

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Font Awesome CDN -->
    <script src="https://kit.fontawesome.com/c2eaecad4c.js"></script>
    <title>Hello World!</title>
</head>
<body>
</body>
</html>

Ai vai no site e procura pelo icone ou oque seja que quiser usar. Copia o html que vai vir da seguinte forma:

<i class="far fa-images"></i>

Esse HTML é referente a um icone que busquei por lá. O Browser vai enterpreta-lo como um caractere.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .