Font-Awesome icon preventing click in parent button

Question

I'm having a problem where the left two pixels of a Font-Awesome icon I've placed inside of a button element do not trigger the click event of the button. Here's an example button: ``` ``` And here's what it looks like with bootstrap Any ideas for why those left two pixels don't trigger a click event? Edit: Here's a test site where I've managed to recreate the issue: http://ace.cwserve.com

Accepted Answer

I know this post is 4 years old but it might help people understand why a font-awesome "icon" inside a button prevents the click event.

When rendered, the icon class adds a ::before pseudo-element to the icon tag that prevents the button's click event.

Given this situation, we should definitly take a look at the CSS pointer-events Property

The pointer-events property defines whether or not an element reacts to pointer events.

So we just need to add this css declaration for the "icon" which is inside a button:

```
button > i {
    pointer-events: none;
} 
```

Font-Awesome icon preventing click in parent button

Solution

Problem