通过CDN的Awesome字体不显示必需的图标

问题描述

我正在尝试在Laravel / Vue项目中使用Awesome图标。但是由于某种原因，无论我如何尝试，该图标均无法正确显示。

我现在尝试了我能想象到的最简单的事情：使用CDN的简单HTML页面。代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="utf-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width,initial-scale=1">
    <header>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    </header>

    <body>
        <i class="fas fa-camera"></i>
    </body>
</html>

但是，就像在我的Laravel项目中一样，我没有看到相机图标，而是看到了某种虚拟图标：其中包含F030的矩形。

顺便说一句：我在Windows下运行Xampp堆栈。

我在做什么错了？

解决方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <header>
        <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

    </header>

    <body>
        <i class="fas fa-camera"></i>
    </body>
</html>

我刚刚从字体真棒页面上使用cdn链接编辑了该链接，无论您嵌入什么，都不会包含所需的图标

取自here

font-awesome html