如何在Angular+ASP.NET Core v2项目中安装并启用FontAwesome 5？

我来帮你搞定这个FontAwesome 5 SVG图标不显示的问题！你已经把包加到webpack vendor配置里了，但FontAwesome 5的SVG模式需要额外的初始化步骤，不是光引入包就能自动工作的。下面是一步步的解决方法：

1. 确认安装了完整的FontAwesome依赖 #

首先，你可能只装了核心包，还需要安装对应的图标包（比如免费的solid风格图标）。打开终端执行：

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

如果你需要其他风格（比如regular、brands），也要安装对应的包，比如@fortawesome/free-regular-svg-icons或@fortawesome/free-brands-svg-icons。

2. 修正webpack.config.vendor.js配置 #

你的现有配置里有两个小问题，调整一下：

• 移除@fortawesome/fontawesome/styles.css：这个是给WebFont模式用的，SVG模式不需要它
• 添加@fortawesome/fontawesome-svg-core到树摇模块列表里

修改后的treeShakableModules应该像这样：

const treeShakableModules = [
  '@angular/animations',
  '@angular/common',
  '@angular/compiler',
  '@angular/core',
  '@angular/forms',
  '@angular/http',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',
  '@angular/router',
  '@fortawesome/fontawesome-svg-core', // 替换原来的@fortawesome/fontawesome
  'zone.js',
];

3. 在Angular应用中初始化FontAwesome #

SVG图标需要主动添加到FontAwesome库，并且启用DOM监听来替换页面里的<i>标签。打开你的src/main.ts或者src/app/app.module.ts，添加以下代码：

import { library, dom } from '@fortawesome/fontawesome-svg-core';
// 导入你需要的单个图标，或者整个风格的图标集
import { faCameraRetro } from '@fortawesome/free-solid-svg-icons';
// 如果要导入全部solid图标，用下面这行代替上面的单个导入：
// import { fas } from '@fortawesome/free-solid-svg-icons';

// 添加图标到库
library.add(faCameraRetro);
// 如果是导入整个图标集，用：
// library.add(fas);

// 启用自动替换：扫描页面里的<i class="fas fa-xxx"></i>标签，替换为SVG元素
dom.watch();

4. 重新打包并运行项目 #

最后，重新生成vendor包，然后启动项目：

webpack --config webpack.config.vendor.js
dotnet run

为什么原来的配置不行？ #

FontAwesome 5的SVG模式和旧版本的WebFont模式不一样：

• 它采用树摇机制，只有你明确添加到库的图标会被打包，不会引入整个图标集
• 需要调用dom.watch()来自动把页面里的<i>标签转换成SVG元素，否则浏览器只会显示普通的文本标签

现在再试试你的<i class="fas fa-camera-retro"></i>，应该能正常显示SVG图标了！

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