Font awesome icons not clickable

Question

I am having a problem with font-awesome icons. When you click on the little plus it is fine however if you click on the rest of the button it will not take you to the link.

<div class="jumbotron">
<p>
    <button type="button" class="btn btn-default pull-right">
        <a href="google.com"> <i class="fa fa-plus" title="Edit"></i> </a></button>
</p>

http://jsfiddle.net/py7vA/217/

How would I fix this?

Answer 1

Don't put an A tag inside BUTTON. It's wrong. Since you are using Bootstrap you can assign the same btn classes to A too.

<a href="google.com" class="btn btn-default pull-right" title="Edit"> <i class="fa fa-plus"></i> </a>