3

I'm using Angular CLI in a small project and Fontawesome 5 via CDN for icon styling.

Came across this issue when I was applying fontawesome 'styling' classes to some buttons and links.

<input>, <a> or <i> elements have different behaviours when they have Fontawesome classes applied to them.

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

Only the second input executed the click function correctly which has no given classes.

Tried swapping the click and class atributes within the element and doesn't work either. Haven't tried getting fontawesome via npm though..

Anyone came across this issue yet?

4

2 回答 2

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

于 2018-10-10T14:45:17.710 回答
0

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

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

似乎图标中的svg标记覆盖了单击处理程序，因此在修复错误之前，这应该处理好。

于 2018-05-16T20:23:28.047 回答