CSS Font Awesome does not load

Asked

Viewed 246 times

0

I’m having difficulty using fot awesome

I found this example on the internet: http://astronautweb.co/snippet/font-awesome/

but I’m not managing to solve this problem

mine HTML and CSS is as follows but the icons appear as "small blocks".

@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>

html css font-awesome

  • Cade the head from your site? looks like there’s nothing inside? If seeing it doesn’t give you the right answer... Have you opened the browser Devtools to see if there is an error in the console? Type 404 for not loading the font?

  • @hugocsl hello I just added the head

  • no error appears

  • 1

    Dude but you don’t have Fontawesome indexed in your HTML, or in your CSS, as you want it to appear?

1 answer

1


Add the Fontawesome CDN to your header. There website you get the link I used in my Eade.

<!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 goes on the site and looks for the icon or whatever you want to use. Copy the html that will come as follows:

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

This HTML refers to an icon I searched there. The Browser will enter it as a character.

Browser other questions tagged html css font-awesome

You are not signed in. Login or sign up in order to post.