Angular7引入Font Awesome

陆耀
2023-12-01

1.下载包

npm install --save font-awesome angular-font-awesome

2.导入相应的module

import { AngularFontAwesomeModule } from 'angular-font-awesome';
@NgModule({
  //...
  imports: [
    //...
    AngularFontAwesomeModule
  ],
  //...
})
export class AppModule { }

解释:这里不一定是AppModule,是你需要在哪个页面下使用,对应的Module

3.在style.scss中添加css文件

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

Git上的步骤是下面这种方式,但是亲测显示不了,本人用的上面那种导入.仅供参考

"styles": [
    "styles.css",
    "/node_modules/font-awesome/css/font-awesome.css"
],

4.使用

<fa name="cog" animation="spin"></fa>
NameTypeOptionsOptional
nameStringF-A IconsNo
sizeStringlg, 2x, 3x, 4x, 5xYes
fixedBooleantrue, falseYes
animationStringspin, pulseYes
rotateNumber, String90, 180, 270, horizontal, verticalYes
inverseBooleantrue, falseYes

参考: https://github.com/baruchvlz/angular-font-awesome#readme

 类似资料: