иконки font awesome отображаются в виде пустого квадрата - PullRequest
Новая
       44

иконки font awesome отображаются в виде пустого квадрата

0 голосов
/ 16 июня 2020

Я не уверен, почему шрифт awesome отображается как пустой квадрат. 

        <div>
            <i class="fas fa-envelope"></i>
            <input type="email" class="form-control validate">
            <label data-error="wrong" data-success="right">Enter your email</label>
        </div>

Вот библиотеки, которые я использовал: 

<head>
    <meta charset="UTF-8">
    <title>XYZ</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <link href="fontawesome-free-5.13.0-web/css/fontawesome.css" rel="stylesheet">
    <!--<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">-->
    <!-- <script src="https://kit.fontawesome.com/56018e5250.js" crossorigin="anonymous"></script> -->
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/main.js"></script>
    <script src="js/bootstrap.min.js"></script>

</head>

enter image description here

Я также пробовал fa и fas вместо fab, и ни один не работал.

вот что я вижу: enter image description here

Однако, когда я пробую это в jsfiddle, я вижу значок электронной почты. Но использование <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"> тоже не работает.

enter image description here

enter image description here

Ответы [ 2 ]

0 голосов
/ 17 июня 2020

Используя это сработало 

   <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>
0 голосов
/ 16 июня 2020 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>XYZ</title>
    <link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet">
</head>

<body>

    <div>
        <i class="fas fa-envelope"></i>
        <input type="email" class="form-control validate">
        <label data-error="wrong" data-success="right">Enter your email</label>
    </div>

</body>

</html>

Попробуйте, все работает нормально Спасибо :)

...