Font awesome icons not clickable

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://ift.tt/2ni42oM

How would I fix this?