IIS测试环境Font Awesome图标404 webfonts路径配置问题

404报错本质是路径不匹配：Font Awesome样式文件默认请求站点根路径下的/webfonts/目录读取字体文件，而你当前字体实际存放在/Content/webfonts/路径下，IIS收到https://projectName.companyName.com/webfonts/fa-solid-900.woff2这类请求时，会默认映射到wwwroot/webfonts物理目录查找资源，找不到对应文件就返回404。本地localhost环境正常通常是因为本地开发服务器的静态资源路径映射规则和IIS测试环境存在差异。

方案1：修改Font Awesome CSS内的字体引用路径（无服务端依赖，推荐） #

• 定位项目中引用的Font Awesome核心样式文件，通常为all.min.css或fontawesome.min.css

• 打开文件搜索所有webfonts/相关的字体引用配置，将路径调整为指向/Content/webfonts的相对路径，调整规则以CSS文件实际存放位置为准，确保最终浏览器发起的字体请求URL指向/Content/webfonts/目录即可：

  • 如果CSS文件存放在/Content/css/目录下，将路径改为../webfonts/即可
  • 如果CSS文件存放在站点根目录，将路径改为Content/webfonts/即可

  默认的@font-face配置参考如下，修改路径时不要改动其他属性：

  @font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("../webfonts/fa-solid-900.woff2") format("woff2"),
         url("../webfonts/fa-solid-900.woff") format("woff"),
         url("../webfonts/fa-solid-900.ttf") format("truetype");
  }
  

• 修改完成后清空浏览器缓存刷新，通过浏览器网络面板确认字体请求URL已指向/Content/webfonts/路径即可。

方案2：IIS配置URL重写规则（无需修改前端文件） #

如果不想调整前端CSS文件，可以通过IIS的URL重写功能，把所有指向根目录/webfonts/的请求自动映射到/Content/webfonts/路径下：

1. 先确认站点所在的IIS服务器已安装URL Rewrite模块，未安装的话先通过Web平台安装程序加装
2. 打开站点根目录下的web.config文件，在<system.webServer>节点下添加如下重写规则：

<rewrite>
  <rules>
    <rule name="MapFontAwesomeWebfontsPath" stopProcessing="true">
      <match url="^webfonts/(.*)$" />
      <action type="Rewrite" url="/Content/webfonts/{R:1}" />
    </rule>
  </rules>
</rewrite>

3. 保存配置后重启对应IIS站点，规则会自动生效。

配置完成后如果还是加载失败，先确认IIS已添加对应字体格式的MIME类型，否则IIS会默认拦截未知类型文件的请求：

• .woff2 对应MIME类型：font/woff2
• .woff 对应MIME类型：font/woff
• .ttf 对应MIME类型：font/ttf

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