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:
<button class="btn btn-mini">
<i class="icon-edit"></i>
</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:
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:
<button class="btn btn-mini">
<i class="icon-edit"></i>
</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.
Share Improve this question edited Feb 18, 2014 at 12:37 Mike Causer 8,3242 gold badges46 silver badges63 bronze badges asked Feb 9, 2014 at 1:16 Cameron WilbyCameron Wilby 2,3101 gold badge26 silver badges38 bronze badges 1- Can u post an example on jsfiddle illustrating the issue? – Yuriy Galanter Commented Feb 9, 2014 at 1:18
3 Answers
Reset to default 10I 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;
}
Outline
The outline isn't part of the CSS box, which means it won't fire click events. This is perhaps slightly counter-intuitive, but that's how it works ...
Your page sets an outline on .btn:focus, but this doesn't seem to be the problem, since it has an offset of -2 (meaning it's displayed inside the box, rather than outside of it).
Moving the box on :active
You can move the box on :active, which can cause neat effect, but first the box is moved, and then will the click event be fired, which will use the moved position.
You can see this in action by keeping the mouse button pressed; the box will move, but the event won't be fired until you release the button. So if you move your box to the right by then pixels, then the left 10 pixels won't do anything.
This is according to spec, from the DOM spec:
click
The click event occurs when the pointing device button is clicked over an element. A click is defined as a mousedown and mouseup over the same screen location. The sequence of these events is:
- mousedown
- mouseup
- click
This seems to be the problem, this following CSS seems to solve it:
button.btn:active {
left: 1px;
top: 1px;
}
Example
Here's a script to demonstrate both issues:
<!DOCTYPE html>
<html><head><style>
body { margin-left: 30px; }
div {
background-color: red;
border: 20px solid green;
outline: 20px solid blue;
width: 100px;
height: 100px;
position: relative;
}
div:active {
left: 20px;
top: 20px;
}
</style></head> <body>
<div></div>
<script src="http://code.jquery./jquery-1.11.0.min.js"></script>
<script>
$('div').on('click', function(e) {
alert('click!');
});
</script></body></html>
I know this was asked a long time ago, but Font Awesome has added the ability to use SVG format for its icons, so selecting the <i> element using CSS is no longer an option if you have enabled SVG in your FA Kit settings, you can inspect the yourself using your browser's dev tools, you'll see it is now wrapped in HTML ments! unless you turn on "Enable Compatibility with Older Versions" in your FA Kit settings. If enabling the patibility with older FA versions is not an option or you just want to use the latest method, you can use the following instead in your CSS file:
[data-prefix='fas'] {
pointer-events: none;
}
But if you do find yourself switching between the old and newer methods you can just use:
button > i, [data-prefix='fas'] {
pointer-events: none;
}
Now clicking on the <button> element with either of the above solutions while using FA should now continue working again as you intended.