Font Awesome 显示框而不是图标

编程问答 2022-04-22

问题描述

我正在创建一个网络项目，直到今天我一直在 Android（Acode 应用程序）上创建网络项目。我总是在我的项目中使用 font awesome，但这次我在运行 Microsoft Edge 的 PC 上（我知道 Edge 不是最适合调试的），我在 vs 代码中创建了该项目，并添加了来自 w3schools.com 的 font awesome CSS 链接作为我通常这样做，但它向我显示矩形，然后我也尝试从 cdnpkg.com 添加字体真棒 CSS 链接，但结果是一样的。这是我的 <head>（同时检查 <Meta> 错误）：

<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/fontawesome.min.css">
<link rel="stylesheet" href="assets/style.css">
<title>Document</title>
</head>

此外，我检查了 FontAwesome CSS 是否已加载到 Web 浏览器中，并且已正确加载和应用（如在开发人员选项窗口中的“源”选项卡上检查的那样）。 我是如何使用的：

<body>
    <i class='fa fa-twitter'></i>
</body>

我还尝试将 font-family 更改为“FontAwesome”、“FontAwesome 5 Free”，...字体粗细正常。

以下是我项目中的问题（开发者选项中的问题面板）以供参考：

The 'x-ua-compatible' Meta element should not be specified as it is not needed.
A 'cache-control' header is missing or empty.
FontAwesome: Static resources should use a 'cache-control' header with 'max-age=31536000' or more.
FontAwesome: Static resources should use a 'cache-control' header with the 'immutable' directive.
Response should include 'x-content-type-options' header.

解决方法

这行得通！ 从您的 <header> 中删除此行：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

并添加：

<meta http-equiv="Cache-control" content="public">
<meta content="text/html; charset=UTF-8; X-Content-Type-Options=nosniff" http-equiv="Content-Type" />

说明： 第一个错误是不言自明的，因为它不需要，

其次，需要缓存控制来保存指令...

我对 X 内容 (you can read more about it here) 不是很熟悉，但根据您的控制台错误需要它，如果 font awesome 仍然无法加载，请删除该行。

元错误肯定会被清除！希望这有帮助！

编辑： 在您的代码中使用它，它可能会也可能不会...

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=31536000,public,immutable"
</FilesMatch>

这可以解决您的浏览器由于静态元素而导致的缓存错误...尝试一下，让我知道它是否有效...(:

,

对于错误，我猜您遗漏了什么

然后我只是尝试了网站上的 twitter 的，它也给了我方形的，而且，有了这个就可以了，你可以试试吗？

<i class="fas fa-times" style="color: red"></i>

这是我认为您缺少的代码

<!doctype html>

<html lang="fr">

</html> (at the end)
,

我对此有 2 个建议。首先，检查您没有覆盖整个网页字体系列，例如：

* {
   font-family: 'sans-serif' !important; 
}

如果是这样，请删除它并将 font-family 应用于所需的资产而不是整个页面，并确保不使用 !important 标签。

第二：

您可以尝试创建一个本地目录来保存和加载字体很棒的样式表和字体，而不是通过 CDN/URL 加载它们

font-awesomefont-awesome-5htmlmeta