如何在Visual Studio 2019中为Angular 12应用安装免费版Font Awesome

安装复杂度差异说明 #

你搜索到的方案差异较大主要有两个核心原因：

• 不同Angular版本对应的Font Awesome适配包版本要求不同，很多老旧教程没有标注适配范围，混在搜索结果里容易混淆
• 不同方案对应不同使用需求：包括全量引入、按需引入、CDN静态资源引入、兼容旧版Font Awesome的CSS类使用方式、付费Pro版配置等，不同场景的步骤自然有差异

仅使用部分免费图标的话可以用下面的最简分步流程，适配Visual Studio 2019 + Angular 12环境：

分步安装教程 #

前置条件 #

你已经在Visual Studio 2019中打开正常可运行的Angular 12项目，本地npm环境配置正常。

步骤1：安装对应版本的依赖包 #

点击Visual Studio 2019顶部菜单的视图 > 终端打开项目终端，依次执行以下3条安装命令，注意指定版本适配Angular 12，避免版本不兼容报错：

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

步骤2：配置根模块引入 #

打开项目路径下的src/app/app.module.ts文件，按以下示例修改代码：

// 新增以下导入语句
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
// 按需引入你需要使用的免费图标，此处以用户、搜索、删除三个图标为例，可自行增删
import { faUser, faSearch, faTrash } from '@fortawesome/free-solid-svg-icons';

@NgModule({
  declarations: [
    // 原有声明内容保持不变
  ],
  imports: [
    // 原有导入内容保持不变，新增以下一行
    FontAwesomeModule
  ],
  providers: [
    // 原有配置保持不变
  ],
  bootstrap: [
    // 原有配置保持不变
  ]
})
export class AppModule {
  // 新增构造函数，将需要使用的图标加入全局库
  constructor(library: FaIconLibrary) {
    library.addIcons(faUser, faSearch, faTrash);
  }
}

如果你不想逐个按需引入图标，需要全量使用所有免费实心图标，可以把图标导入替换为import { fas } from '@fortawesome/free-solid-svg-icons'，构造函数内修改为library.addIconPacks(fas)即可，仅会小幅增加打包体积，普通项目可正常使用。

步骤3：在组件模板中使用图标 #

在任意组件的HTML模板文件中，直接使用以下格式调用图标即可：

<!-- 调用用户图标 -->
<fa-icon [icon]="['fas', 'user']"></fa-icon>
<!-- 调用搜索图标 -->
<fa-icon [icon]="['fas', 'search']"></fa-icon>
<!-- 调用删除图标 -->
<fa-icon [icon]="['fas', 'trash']"></fa-icon>

图标样式可直接通过添加class或style属性调整大小、颜色，和普通DOM元素用法一致。

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