在 FontAwesome 和 Angular 10 中更改图标

Question

我配置了 FontAwasome pro 并在我的 Angular 10 项目中工作。

<div class="update-split" [class]="testClass"><fa-icon [icon]="['fad', 'sync-alt']"></fa-icon></div>

此行有效，并显示正确的图标但是如果我尝试像这样绑定图标：

<div class="update-split" [class]="testClass"><fa-icon [icon]="testIcon"></fa-icon></div>

然后在我的 ts 文件中这样做

this.testIcon = "['fad', 'sync-alt']";

我得到：错误错误：无法在图标库中找到 iconName=['fad'、'sync-alt'] 和 prefix=fas 的图标。

于是，他试图在正常的fas库中找到一个名为['fad'、'sync-alt']的图标。也许只是一个带有 ' " 错误的字符串？谢谢

Answer 1

可以通过在 typescript 变量中使用整个字体 awesome 标签和 class 来完成，例如：

public font_awesome:HTMLElement;
this.font_awesome  = '<i class="fas fa-adjust"></i>'

然后在您的 .html 文件中，您可以按如下方式绑定值：

<span [innerHTML]="font_awesome"></span>

我知道它与您要使用的路径不同，但希望对您有所帮助。

Answer 2

尝试将 ts 中的 this.testIcon = "['fad', 'sync-alt']"; 替换为 this.testIcon = ['fad', 'sync-alt'];（不带双引号）。你想绑定到一个对象，而不是一个字符串

Change icon in FontAwesome and Angular 10