Fabric图标无法显示求助：CDN失效及替代方案咨询

1. 本地安装官方npm包 #

直接通过npm引入资源，彻底规避CDN不稳定问题：

• 执行安装命令：

  npm install office-ui-fabric-core@11.0.0 --save
  

• 在页面中引入本地CSS文件（路径根据项目结构调整）：

  <link rel="stylesheet" href="./node_modules/office-ui-fabric-core/css/fabric.min.css">
  <link rel="stylesheet" href="./node_modules/office-ui-fabric-core/css/fabric-icons.min.css">
  

2. 替换为可靠第三方CDN #

如果不想本地安装，试试这两个稳定的CDN链接（版本与你原用的11.0.0一致）：

• unpkg：

  <link rel="stylesheet" href="https://unpkg.com/office-ui-fabric-core@11.0.0/css/fabric.min.css">
  <link rel="stylesheet" href="https://unpkg.com/office-ui-fabric-core@11.0.0/css/fabric-icons.min.css">
  

• jsDelivr：

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/office-ui-fabric-core@11.0.0/css/fabric.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/office-ui-fabric-core@11.0.0/css/fabric-icons.min.css">
  

3. 自行托管资源文件 #

若CDN都不靠谱，手动下载资源托管到自己服务器：

• 去office-ui-fabric-core的GitHub发布页，下载11.0.0版本的包，提取css目录下的两个CSS文件
• 上传到你的项目静态资源目录，然后本地引入：

  <link rel="stylesheet" href="/static/css/fabric.min.css">
  <link rel="stylesheet" href="/static/css/fabric-icons.min.css">
  

4. 迁移到Fluent UI Icons（长期方案） #

Office UI Fabric已升级为Fluent UI，建议迁移到Fluent UI Icons获得更持久的支持：

• 引入示例：

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fluentui/font-icons-mdl2@8.6.0/css/icons.min.css">
  

• 图标类名替换规则：原ms-Icon--[Name]改为fui-[Name]，具体参考Fluent UI官方文档。

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