Angular(点击)无法通过 CDN 与 Font Awesome 5 配合使用

Question

我在一个小项目中使用 Angular CLI，并通过 CDN 使用 Fontawesome 5 来设置图标样式。

当我将 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>

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

尝试交换元素内的点击和类属性，但也不起作用。 不过还没有尝试过通过 npm 获得 fontawesome ..

有人遇到过这个问题吗？

Answer 1

您确实可以将 <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