Angular项目中集成Font Awesome图标

Angular项目中集成Font Awesome图标

  1. Angular
  2. 5 years ago
  3. 1 min read

通过三部操作就可以在Angular项目中使用Font Awesome图标：

  1. 安装
  2. 样式配置
  3. 使用

安装

通过 NPM 安装，并保存到 package.json 

npm install --save font-awesome

配置样式 css

在 style.css 

@import '~font-awesome/css/font-awesome.css';

配置样式 scss

在 style.scss 

$fa-font-path: "../node_modules/font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';

在Angular使用

<i class="fa fa-area-chart"></i>

配合Angular Material 

export class AppModule {
  constructor(matIconRegistry: MatIconRegistry) {
    matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
  }
}

<mat-icon fontSet="fontawesome" fontIcon="fa-area-chart"></mat-icon>
tool