Angular 4项目中Font Awesome正确使用方式及IE兼容问题解决

我之前也碰到过Angular生产构建后IE无法显示Font Awesome图标的问题，这本质上是IE对字体资源的加载规则和Angular构建打包逻辑的适配问题。下面是我亲测有效的解决方案，以及完整的正确配置流程：

1. 安装依赖（你这步是对的）：
   npm install font-awesome --save

2. 调整style.scss中的路径配置：
   开发环境下../node_modules/的路径能正常工作，但生产构建后资源结构会变化，建议改为相对于输出目录的路径：

// 指向构建后字体文件存放的位置
$fa-font-path: "./assets/fonts";
@import '~font-awesome/scss/font-awesome.scss';

Angular默认不会自动把node_modules里的字体文件复制到生产构建目录，所以需要手动配置.angular-cli.json（Angular 4使用的是这个配置文件）：
找到apps数组下的assets字段，添加字体文件的复制规则：

"apps": [
  {
    // 其他配置...
    "assets": [
      "assets",
      "favicon.ico",
      // 新增这一条：把Font Awesome的字体复制到dist/assets/fonts
      {
        "glob": "**/*",
        "input": "../node_modules/font-awesome/fonts",
        "output": "./assets/fonts/"
      }
    ],
    // 其他配置...
  }
]

这样执行ng build --prod时，Angular会自动把Font Awesome的所有字体文件（.eot、.woff2、.woff、.ttf、.svg）复制到dist/assets/fonts目录下，和你在style.scss里配置的路径对应上。

IE对现代CSS和资源加载有一些限制，需要补充以下配置：

1. 完善polyfills.ts：
   打开项目根目录的polyfills.ts，确保启用了IE必需的polyfill（去掉对应行的注释即可）：

// IE9, IE10 and IE11 requires all of the following polyfills.
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

// IE10 and IE11 requires the following for NgClass support on SVG elements
import 'classlist.js';

// IE10 and IE11 requires the following for the Reflect API.
import 'core-js/es6/reflect';

2. 在index.html中添加IE兼容元标签：
   确保<head>里有这条标签，强制IE使用最新的渲染模式：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

执行ng build --prod完成构建后，检查dist/assets/fonts目录下是否存在Font Awesome的字体文件，然后用IE打开dist目录下的index.html，查看图标是否正常显示。

如果还是不行，可以按以下步骤排查：

• 打开IE的开发者工具（F12），切换到“网络”标签，刷新页面，看字体文件是否返回404。如果是，说明路径配置不匹配，调整$fa-font-path或.angular-cli.json里的output路径。
• 检查IE的安全设置，是否阻止了本地字体文件的加载（如果是本地测试的话），可以临时降低安全级别测试。
• 确认生产构建时没有启用会删除@font-face声明的CSS压缩规则，Angular默认的压缩配置是没问题的，但如果自定义了配置需要注意。

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