Question

我在一个小项目中使用Angular CLI，在FNtawesome 5中使用CDN进行图标样式。

当我将fontawesome'样式'类应用于某些按钮和链接时遇到了这个问题。

<input>，<a>或<i>元素在应用了Fontawesome类时会有不同的行为。

<div class="float-left clearSearchButton">
  <input type="button" (click)="clearFilter()" class="fas fa-eraser fa-xs"/>
  <input type="button" (click)="clearFilter()"/>
</div>

只有第二个输入正确执行了没有给定类的点击功能。

尝试交换元素中的click和class属性，但也不起作用。虽然没有尝试通过npm获得fontawesome ..

有人遇到过这个问题吗？

Answer 1

尝试使用您的输入用所述类包装元素，如下所示：

<button (click)="clearFilter()"/><i class="fas fa-eraser fa-xs"></i></button>

似乎图标中的 svg 标记会覆盖点击处理程序，因此在错误得到解决之前，应该注意这一点。

Answer 2

您确实可以只用如下按钮包装<i>对象：

<button class="fa-override faa-parent faa-slow animated-hover" ng-click="vm.showTimeSettings = !vm.showTimeSettings">
    <i class="fas fa-cog faa-spin text-primary"></i>
</button>

...我刚刚为按钮创建了一种新样式，以便它没有边框/背景：

.fa-override {
  border-style: none;
  background-color: transparent;
  padding: 0;
}

这样结果就是这样：

在本期中很好地描述了发生了什么并且被破坏了：https://github.com/FortAwesome/Font-Awesome/issues/12055

Angular（单击）不通过CDN使用Font Awesome 5

2 个答案: