Angular 中使用 Font Awesome图标

Font Awesome是一个非常强大的图标插件,这篇文章就是讲解我在项目中怎么使用它

环境

Angular 8

npm导入

  • cnpm install @fortawesome/fontawesome-svg-core
  • cnpm install @fortawesome/free-solid-svg-icons
  • cnpm install @fortawesome/angular-fontawesome@<^0.5.2>

在AppModule中引入

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

在import中导入
Angular 中使用 Font Awesome图标_第1张图片
在需要使用的地方引入需要使用的图标
举两个例子
Angular 中使用 Font Awesome图标_第2张图片
Angular 中使用 Font Awesome图标_第3张图片
在组建中引入
在这里插入图片描述
Angular 中使用 Font Awesome图标_第4张图片

HTML页面

在这里插入图片描述
就可以在页面显示了

再来一个,可以对比的进行
Angular 中使用 Font Awesome图标_第5张图片
Angular 中使用 Font Awesome图标_第6张图片
Angular 中使用 Font Awesome图标_第7张图片
在这里插入图片描述
好了,完成

你可能感兴趣的:(Angular)