Azure部署后FontAwesome与Bootstrap图标无法正常显示求助

以下是针对本地正常、Azure部署后图标显示为方框问题的具体排查与解决步骤：

• 检查Express静态资源配置
  确保Express正确托管图标相关静态文件（如FontAwesome字体文件、Bootstrap图标资源）。若模板使用本地资源，确认express.static路径配置无误：

  const path = require('path');
  app.use(express.static(path.join(__dirname, 'public')));
  

  同时核对HTML中资源引用为相对路径，避免硬编码本地绝对路径。

• 配置Azure静态资源MIME类型
  Azure默认可能未正确识别字体文件的MIME类型，导致浏览器无法加载。可通过两种方式配置：

  1. Azure门户配置：进入App Service的「配置」→「MIME类型」，添加以下映射：
     • .woff → application/font-woff
     • .woff2 → font/woff2
     • .ttf → application/font-sfnt
  2. web.config文件配置：在项目根目录创建web.config文件，写入：

     <?xml version="1.0" encoding="UTF-8"?>
     <configuration>
       <system.webServer>
         <staticContent>
           <remove fileExtension=".woff" />
           <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
           <remove fileExtension=".woff2" />
           <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
           <remove fileExtension=".ttf" />
           <mimeMap fileExtension=".ttf" mimeType="application/font-sfnt" />
         </staticContent>
       </system.webServer>
     </configuration>
     

• 切换为CDN资源引用
  将本地资源替换为官方CDN链接，规避路径与MIME类型问题：

  • FontAwesome引用：

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    

  • Bootstrap图标引用：

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    

• 验证部署文件完整性
  通过Azure门户的「高级工具」→「Kudu」查看网站目录，确认图标相关的字体文件、CSS文件已完整部署，避免部署过程中遗漏.woff/.ttf等文件。

• 清除缓存
  强制刷新浏览器（Ctrl+F5）清除本地缓存；若Azure存在静态资源缓存，可重启App Service，或在「配置」→「常规设置」中启用「静态内容压缩」优化资源加载。

内容的提问来源于stack exchange，提问作者Ara Dleir