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

更改FontAwesome和Angular 10中的图标

angular10 font-awesome angular

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

我配置了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 回复 | 直到 4 年前

PMO1948 4 年前

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

-1

Dayvid Kelly 4 年前

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

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

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

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

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

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

1 年前

Kael · 在html表格中显示关系api数据-角度

2 年前