Font Awesome图标显示为矩形方框的问题求助

我最近在PC端用VS Code开发Web项目，之前一直用Android的Acode App做Web开发，一直用Font Awesome图标库没出过问题。这次在Edge浏览器里（我知道Edge不是最佳调试浏览器哈），按照之前习惯加了w3schools的Font Awesome CSS链接，结果图标全变成矩形方框了！换成cdnpkg的链接也没用。

我的页面代码情况 #

头部代码（麻烦帮忙检查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>

我已经通过浏览器开发者工具的Sources标签确认Font Awesome CSS已经正常加载并应用了。

图标使用方式 #

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

我还试着修改font-family为'FontAwesome'、'FontAwesome 5 Free'这些值，也把font-weight设为normal，但问题还是没解决。

开发者工具Issues面板的提示 #

• 不应指定'x-ua-compatible' meta元素，该元素已无必要
• 缺少或为空的'cache-control'响应头
• FontAwesome：静态资源应使用包含'max-age=31536000'或更长时间的'cache-control'响应头
• FontAwesome：静态资源应使用包含'immutable'指令的'cache-control'响应头
• 响应应包含'x-content-type-options'响应头

问题原因与解决办法 #

核心问题：Font Awesome 5的样式引用不完整 #

Font Awesome 5把图标分成了不同的资源包，比如品牌图标（brands）、实心图标（solid）、常规图标（regular），你只引入了核心的fontawesome.min.css，但像fa-twitter这种品牌图标，需要额外引入对应的brands.min.css文件。

修改后的头部代码应该是这样：

<head>
<meta charset="UTF-8">
<!-- 删掉X-UA-Compatible，现在主流浏览器都不需要这个标签了 -->
<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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/brands.min.css">
<link rel="stylesheet" href="assets/style.css">
<title>Document</title>
</head>

这样浏览器就能找到品牌图标的字体文件，图标就能正常显示了。

关于font-weight的说明 #

品牌图标不需要设置font-weight，但如果是使用实心图标（比如fa-home），需要设置font-weight: 900，因为Font Awesome 5的实心图标依赖这个权重值来加载对应字体。

关于开发者工具的其他提示 #

• X-UA-Compatible：确实可以删掉，现在IE已经被淘汰，这个标签对现代浏览器没有作用了。
• 那些cache-control相关的提示：属于服务器端的配置问题，本地开发时完全不用在意，等你把项目部署到服务器上的时候，再配置相应的响应头即可，不影响当前图标显示的问题。
• x-content-type-options：同样是服务器端配置的响应头，本地开发可以忽略，部署时再添加。

内容的提问来源于stack exchange，提问作者Satyam Mishra