"i" turn an HTML button

Question

Hello, I would like my html 'i' to turn a button, because from it I want to call a modal, I want to use an 'i' because I want to put the facebook icon, I tried to put inside the button, but did not hit the design I want.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#facebookModal">
                                        <i class="fab fa-facebook"></i>
                                    </button>

I wish you had just the 'i' and from it called the modal.

Answer 1

If you use some js framework (angular, vuejs) you could just attach the function to I. As in the example it is not clear which approach, one of them would be:

<div class="btn btn-primary" >
    <a href="#">
        <i class="fab fa-facebook"></i>
    </a>

</div>

Answer 2

Plunker

<i data-toggle="modal" data-target="#facebookModal" class="btn btn-primary">
    <span class="fab fa-facebook"></span>
</i>