如何在Angular CLI 1.6.0项目中正确集成Font Awesome 5？

首先，针对你碰到的TypeScript错误：Module '"xxx/node_modules/@fortawesome/fontawesome/index"' has no default export，原因是@fortawesome/fontawesome核心库没有默认导出，正确的导入写法应该是：

import * as fontawesome from '@fortawesome/fontawesome';
import { faUser } from '@fortawesome/fontawesome-pro-light';

不过如果你更倾向于用<i class="fal fa-user"></i>这类传统类名写法，其实有更简便的方案——直接引入WebFont样式文件，完全不需要在TypeScript里导入模块，具体步骤如下：

步骤1：确认已安装依赖包 #

你已经完成了这一步，确保以下命令执行成功：

yarn config set @fortawesome:registry https://npm.fontawesome.com/xxxxx-xxxx-xxx-xxx-xxxxxxx
yarn add @fortawesome/fontawesome
yarn add @fortawesome/fontawesome-pro-light

步骤2：在Angular CLI配置中引入样式文件 #

因为你用的是Angular CLI 1.6.0（对应Angular 5），配置文件是.angular-cli.json。找到文件里的styles数组，添加Pro Light的压缩样式文件路径：

"styles": [
  "styles.css",
  "../node_modules/@fortawesome/fontawesome-pro-light/css/light.min.css"
]

提示：路径要根据你的项目结构调整，如果node_modules在项目根目录，上面的路径是正确的；如果src是子目录，可能需要微调路径层级。

如果之后需要用到其他样式（比如Solid、Regular），只需要安装对应的包（如@fortawesome/fontawesome-pro-solid），再把对应的css文件添加到styles数组里即可。

步骤3：验证使用 #

现在你可以在任意组件模板里直接用类名调用图标了：

<i class="fal fa-user"></i>
<i class="fal fa-envelope"></i>

补充：关于按需导入的说明 #

如果你想用Font Awesome官方推荐的<fa-icon>组件写法，才需要在TypeScript里导入图标并注册到库中：

import * as fontawesome from '@fortawesome/fontawesome';
import { faUser } from '@fortawesome/fontawesome-pro-light';

fontawesome.library.add(faUser);

之后在模板里可以这样写：

<fa-icon [icon]="['fal', 'user']"></fa-icon>

但这种方式更适合按需加载减少打包体积，如果你偏好传统类名写法，直接引入css文件是最省心的选择。

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