代码之家 › 专栏 › 技术社区 › 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>

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

推荐文章

Simon · 使用React更改字体可怕图标的颜色

3 年前

Muhammad Asif Mohtesham · 在Font Awesome中,是否可以使用CSS内容属性在“far”和“fas”数据前缀之间切换?[副本]

7 年前

en Peris · 使用JQuery动态更改AwesomeIcon的颜色

7 年前

Pranta Saha · 为什么Font Awesome图标类不同

7 年前

Mav · 如何将图标与固定高度标记的中心对齐[重复]

7 年前

LP13 · 在中心对齐定位标记内的内容

7 年前

Fjott · CSS-居中字体超级图标

7 年前

Sinan Samet · 字体很棒的图标不会显示在Angular 5中

7 年前

Tithos · 品牌FA5图标不工作

7 年前

SuperUberDuper · 字体awesome在加载之前显示方块

7 年前