Angular (click) not working with Font Awesome 5 via CDN

Question

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?

tried that also and doesn't fix the problem – André Pereira Mar 03 '18 at 18:08 — André Pereira, Mar 03 '18 at 18:08
Do you have any output in your console – Isaac Obella Mar 03 '18 at 18:11 — Isaac Obella, Mar 03 '18 at 18:11

score 1 · Answer 1 · answered Oct 10 '18 at 14:45

You can indeed just wrap the <i> object with a button like so:

<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>

...where I just created a new style for the button so that it doesn't have a border/background:

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

That way the result is something like this:

What happens and was is broken is described pretty well in this issue: https://github.com/FortAwesome/Font-Awesome/issues/12055

score 0 · Answer 2 · answered May 16 '18 at 20:23

Try wrapping the element with said class with your input, something like this:

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

Seems that the svg tag from the icon overrides the click handler, so this should take care of that until the bug gets fixed.

Angular (click) not working with Font Awesome 5 via CDN

2 Answers2