Angular项目中仅Font Awesome的fa类生效，fas/far/fab无效问题排查

兄弟，这问题太典型了！你遇到的情况核心原因就是装错了Font Awesome的版本，再加上4.x和5.x的类命名规则完全不一样导致的。

为啥旧写法能用，新前缀不行？ #

• 你执行npm install fontawesome装的是4.7.0版本——这个版本里所有图标统一用fa作为前缀，比如<i class="fa fa-user"></i>，根本没有fas（实心图标）、far（空心图标）、fab（品牌图标）这些前缀，这些都是Font Awesome 5.x才新增的命名规则。
• 你在styles.scss里配置的$fa-font-path: "~font-awesome/fonts"; @import '~font-awesome/scss/font-awesome';也是4.x版本的专属写法，和5.x的引入逻辑完全不兼容。

解决步骤：升级到Font Awesome 5.x #

1. 先卸载旧的4.x版本：

   npm uninstall fontawesome
   

2. 安装5.x的核心包和你需要的图标包（免费版的实心、空心、品牌图标都安排上）：

   npm i --save @fortawesome/fontawesome-svg-core
   npm i --save @fortawesome/free-solid-svg-icons
   npm i --save @fortawesome/free-regular-svg-icons
   npm i --save @fortawesome/free-brands-svg-icons
   npm i --save @fortawesome/angular-fontawesome
   

3. 两种使用方式任你选：

   方式一：组件式引入（推荐，符合Angular风格）

   在需要用图标的组件里，比如app.component.ts，导入对应图标：

   import { Component } from '@angular/core';
   // 导入实心用户图标
   import { faUser } from '@fortawesome/free-solid-svg-icons';
   // 导入空心用户图标（重命名避免冲突）
   import { faUser as farUser } from '@fortawesome/free-regular-svg-icons';
   // 导入品牌图标（比如GitHub）
   import { faGithub } from '@fortawesome/free-brands-svg-icons';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss']
   })
   export class AppComponent {
     faUser = faUser;
     farUser = farUser;
     faGithub = faGithub;
   }
   

   然后在模板里用<fa-icon>组件调用：

   <!-- 实心用户图标 -->
   <fa-icon [icon]="faUser"></fa-icon>
   <!-- 空心用户图标 -->
   <fa-icon [icon]="farUser"></fa-icon>
   <!-- GitHub品牌图标 -->
   <fa-icon [icon]="faGithub"></fa-icon>
   

   方式二：全局引入所有图标（适合大量用图标的场景）

   在app.module.ts里全局注册所有图标：

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
   import { library } from '@fortawesome/fontawesome-svg-core';
   // 导入所有实心、空心、品牌图标
   import { fas } from '@fortawesome/free-solid-svg-icons';
   import { far } from '@fortawesome/free-regular-svg-icons';
   import { fab } from '@fortawesome/free-brands-svg-icons';
   
   // 把图标添加到全局库
   library.add(fas, far, fab);
   
   @NgModule({
     declarations: [
       // 你的组件列表
     ],
     imports: [
       BrowserModule,
       FontAwesomeModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

   之后模板里就可以用前缀+图标名的方式调用：

   <fa-icon icon="user" prefix="fas"></fa-icon>
   <fa-icon icon="user" prefix="far"></fa-icon>
   <fa-icon icon="github" prefix="fab"></fa-icon>
   

补充说明 #

如果实在不想升级，那只能继续用4.x的fa fa-user写法，但4.x的图标数量、样式丰富度都远不如5.x，还是推荐升级到5.x版本哦。

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