如何从本地磁盘加载FontAwesome并正常显示图标？

图标显示方块的核心原因是只下载了FontAwesome的CSS文件，缺失了配套的字体资源文件，且CSS引用路径或文件结构不符合要求。按以下步骤解决：

• 下载完整的FontAwesome离线包
  不要仅单独下载all.min.css，需下载对应版本（如6.0.0）的完整离线包，解压后会包含css和webfonts两个关键文件夹——webfonts里存放着图标对应的woff2/woff/ttf等字体文件，这是图标正常显示的核心。

• 搭建正确的本地文件结构
  以你的报告路径c:\app\report.html为例，文件结构需如下：

  c:\app\
  ├─ report.html
  └─ lib\
     └─ fontawesome\
        ├─ css\
        │  └─ all.min.css
        └─ webfonts\
           ├─ fa-brands-400.woff2
           ├─ fa-regular-400.woff2
           ├─ fa-solid-900.woff2
           └─ 同版本下的其他字体文件
  

  关键：webfonts必须与css文件夹同级，因为all.min.css内部引用字体的路径是../webfonts/[字体文件名]，相对路径必须匹配。

• 修正HTML中的CSS引用路径
  将原引用代码改为：

  <link rel="stylesheet" href="lib/fontawesome/css/all.min.css" />
  

  原路径lib/fontawesome/all.min.css跳过了css文件夹，导致CSS无法找到上级目录的webfonts资源。

• 验证资源加载状态
  打开HTML后按F12调出浏览器控制台，切换到「网络」标签，过滤「字体」类型：

  • 如果字体文件显示404，检查文件夹结构是否符合要求，或调整CSS引用的相对路径
  • 若字体加载成功，图标即可正常显示

• 可选：使用SVG版FontAwesome（无需字体文件）
  若不想处理字体资源，可下载SVG核心包，引用其中的svg-with-js.min.js，直接通过类名调用图标，无需依赖字体文件，适配本地file://协议更友好。

内容的提问来源于stack exchange，提问作者Allan Xu