5

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?

user3080600
  • 1,309
  • 2
  • 11
  • 23
  • 2
    Looking at your classes, it looks like you are using bootstrap, right? If that is the case, remove the button and add `btn btn-default pull-right` to the `` instead. – Cave Johnson Mar 25 '17 at 17:34

2 Answers2

10

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>
Cave Johnson
  • 6,499
  • 5
  • 38
  • 57
Ibrahim
  • 2,034
  • 15
  • 22
0

You can do a couple different things one is what Ibrahim mentioned or:

<div class="jumbotron">
    <p>

            <a href="google.com"> <i class="fa fa-plus btn btn-default pull-right" title="Edit"></i> </a>
    </p>
</div>
Squeakasaur
  • 245
  • 2
  • 13