字体真棒图标显示为空白方块答案

【问题标题】：font awesome icons showing as a blank square字体真棒图标显示为空白方块
【发布时间】：2020-06-16 05:01:00
【问题描述】：

我不知道为什么字体 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>

我还尝试了fa 和fas 而不是fab，但都没有成功。

这是我看到的：

但是，当我在 jsfiddle 中尝试此操作时，我能够看到电子邮件图标。但是使用<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"> 也不起作用。

【问题讨论】：

请使用嵌入式代码 sn-p 工具，帮助解释这段代码做了什么，还没有做什么。以及你想要它做什么
确保您的电脑已连接到互联网，因为这里您使用的是 fontawesome 的 cdn，所以对于 cdn，您需要与内部人员连接
use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> 这个 cdn 有效。试试这个
@Mona，我认为你有字体相关的问题。请检查您的控制台，是否存在与扩展名为 .ttf、.woff 或 .woff2 的字体相关的错误或警告？
您在浏览器 console.log 中看到什么错误？

标签： html css font-awesome font-awesome-5

【解决方案1】：

使用这个有效

   <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>

【讨论】：

【解决方案2】：

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

试试这个，效果很好谢谢:)

【讨论】：