从Angular 5组件添加Font Awesome 5图标 [英] Adding Font Awesome 5 icon from Angular 5 component

问题描述

我在Angular 5中使用Font Awesome 5(angular2-fontawesome-程序包).

I am using Font Awesome 5 (angular2-fontawesome - package) with Angular 5.

我想做的是从组件中导入fa图标.

What I am trying to do is to import fa icon from component.

HTML:

<mat-list>
     <mat-list-item><a [routerLink]="['/']" fragment="intro-text" [innerHTML]="introText"> {{introText}} </a></mat-list-item>
     ...
</mat-list>

组件:

introText = "Welcome";

@HostListener("window:resize", ["$event"])
onResize(event) {      
  this.introText = window.innerWidth < 1080 ? '<i fa class="fas fa-home"></i> <h1>1</h1>' : "Welcome";
}   

当我在1080像素以上时，它会显示欢迎"，当我在1080像素以下时，则显示数字1粗体和大.

When I am above from 1080 pixels it shows me "Welcome" and when is below it shows me the number 1 bold and big.

问题是该图标没有显示.我检查了一下...

The problem is that icon it didn't show up. I checked to put...

<i fa class="fas fa-home">

在HTML中

可以工作，但是从组件上却不能.为什么以及如何解决此问题?

in Html and it works but from component it didn't. Why and what can I do to fix this?

推荐答案

Bootstrap 4已删除Font Awesome导入，您需要显式导入Font Awesome.

Bootstrap 4 has removed Font Awesome import , you need to explicitly import Font Awesome .

这篇关于从Angular 5组件添加Font Awesome 5图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！