代码之家 › 专栏 › 技术社区 › Pierre-D Savard

更改FontAwesome和Angular 10中的图标

angular10 font-awesome angular

0

Pierre-D Savard · 技术社区 · 5 年前

我配置了FontAwasome pro,并在我的Angular 10 projet中工作。

<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']和前缀=fas的图标。

因此,他试图在普通的fas库中找到一个名为[‘fad’、‘sync alt’]的图标。也许只是一个带有“”错误的字符串? 谢谢

0 回复 | 直到 5 年前

1

0

PMO1948 5 年前

尝试替换 this.testIcon = "['fad', 'sync-alt']"; 在你的ts to this.testIcon = ['fad', 'sync-alt']; (没有双引号)。您想绑定到对象,而不是字符串

2

-1

Dayvid Kelly 5 年前

可以通过在typescript变量中使用整个font-awesome标签和类来完成,例如:

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

然后,在.html文件中,您可以按如下方式绑定该值:

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

我知道这条路和你想走的不一样,但希望它能有所帮助。