Angular (щелчок) не работает с Font Awesome 5 через CDN

Question

Я использую Angular CLI в небольшом проекте и Fontawesome 5 через CDN для стилизации иконок.

Столкнулся с этой проблемой, когда я применял классные классические стили для некоторых кнопок и ссылок.

<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, хотя..

Кто-нибудь сталкивался с этим вопросом еще?

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

Answer 2

Попробуйте обернуть элемент указанным классом с помощью ввода, что-то вроде этого:

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

Кажется, что тег svg на значке переопределяет обработчик кликов, так что об этом следует заботиться, пока ошибка не будет исправлена.