Sign in


Sign up


Bootstrap Icon Button

Bootstrap icon button is a combination of a standard Bootstrap button with Font Awesome icon inside it. It may contain icon only or text with an icon.

Since icons are generally used to deal with intuitiveness of UI design, Bootstrap icons buttons tend to increase it.

It can either be used as icon only and icon + text combination.

See the following Bootstrap icon buttons examples:


Basic example

Font Awesome icons

Within MDB project you can use more than 600 icons. Check out our documentation page to know all possible icons.

                
<!-- Grid row -->
<div class="row">

    <!-- Grid column -->
    <div class="col-md-12 mb-r">

        <button type="button" class="btn btn-primary px-3"><i class="fa fa-android" aria-hidden="true"></i></button>
        <button type="button" class="btn btn-default px-3"><i class="fa fa-balance-scale" aria-hidden="true"></i></button>
        <button type="button" class="btn btn-secondary px-3"><i class="fa fa-birthday-cake" aria-hidden="true"></i></button>
        <button type="button" class="btn btn-success px-3"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i></button>
        <button type="button" class="btn btn-info px-3"><i class="fa fa-tint" aria-hidden="true"></i></button>
        <button type="button" class="btn btn-warning px-3"><i class="fa fa-bolt" aria-hidden="true"></i></button>
        <button type="button" class="btn btn-danger px-3"><i class="fa fa-users" aria-hidden="true"></i></button>

    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-md-12 mb-r">

        <button type="button" class="btn btn-elegant"><i class="fa fa-user-o pr-2" aria-hidden="true"></i>User</button>
        <button type="button" class="btn btn-unique"><i class="fa fa-wifi pr-2" aria-hidden="true"></i>Wifi</button>
        <button type="button" class="btn btn-pink"><i class="fa fa-plane pr-2" aria-hidden="true"></i>Plane</button>
        <button type="button" class="btn btn-purple"><i class="fa fa-heart pr-2" aria-hidden="true"></i>Heart</button>

    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-md-12">

        <button type="button" class="btn btn-outline-secondary waves-effect px-3"><i class="fa fa-trophy" aria-hidden="true"></i></button>
        <button type="button" class="btn btn-outline-info waves-effect px-3"><i class="fa fa-thumb-tack" aria-hidden="true"></i></button>
        <button type="button" class="btn btn-outline-warning waves-effect px-3"><i class="fa fa-rocket" aria-hidden="true"></i></button>
        <button type="button" class="btn btn-outline-primary waves-effect"><i class="fa fa-sun-o pr-2" aria-hidden="true"></i>Sunny</button>
        <button type="button" class="btn btn-outline-default waves-effect"><i class="fa fa-star pr-2" aria-hidden="true"></i>Star</button>

    </div>
    <!-- Grid column -->

</div>
<!-- Grid row -->
                
            

Additional button icons MDB Pro component

                
<!-- Grid row -->
<div class="row">

    <!-- Grid column -->
    <div class="col-md-12 mb-r">

        <a type="button" class="btn-floating deep-purple"><i class="fa fa-youtube-play" aria-hidden="true"></i></a>
        <a type="button" class="btn-floating indigo"><i class="fa fa-google-wallet" aria-hidden="true"></i></a>
        <a type="button" class="btn-floating light-blue"><i class="fa fa-envira" aria-hidden="true"></i></a>
        <a type="button" class="btn-floating cyan"><i class="fa fa-apple" aria-hidden="true"></i></a>
        <a type="button" class="btn-floating dark-green"><i class="fa fa-arrows-alt" aria-hidden="true"></i></a>
        <a type="button" class="btn-floating light-green"><i class="fa fa-hand-o-right" aria-hidden="true"></i></a>

    </div>
    <!-- Grid column -->
            
    <!-- Grid column -->
    <div class="col-md-12 mb-r">

        <button type="button" class="btn btn-rounded btn-amber"><i class="fa fa-th-list pr-2" aria-hidden="true"></i>List</button>
        <button type="button" class="btn btn-rounded btn-brown"><i class="fa fa-rotate-right pr-2" aria-hidden="true"></i>Rotate</button>
        <button type="button" class="btn btn-rounded btn-blue-grey"><i class="fa fa-floppy-o pr-2" aria-hidden="true"></i>Floppy</button>
        <button type="button" class="btn btn-rounded btn-mdb"><i class="fa fa-bitcoin pr-2" aria-hidden="true"></i>Bitcoin</button>

    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-md-12">
        
        <button type="button" class="btn btn-outline-success btn-rounded waves-effect"><i class="fa fa-cogs pr-2" aria-hidden="true"></i>Success</button>
        <button type="button" class="btn btn-outline-info btn-rounded waves-effect"><i class="fa fa-wheelchair pr-2" aria-hidden="true"></i>Info</button>
        <button type="button" class="btn btn-outline-warning btn-rounded waves-effect"><i class="fa fa-car pr-2" aria-hidden="true"></i>Warning</button>
        <button type="button" class="btn btn-outline-danger btn-rounded waves-effect"><i class="fa fa-train pr-2" aria-hidden="true"></i>Danger</button>

    </div>
    <!-- Grid column -->

</div>
<!-- Grid row -->
                
            

Button icons sizing MDB Pro component

                
.btn .fa.fa-3x {
    font-size: 3em;
}
.btn .fa.fa-2x {
    font-size: 2em;
}
                
            
                
<!-- Grid row -->
<div class="row">

    <!-- Grid column -->
    <div class="col-md-6 col-xl-3 text-center mb-r">

        <a type="button" class="btn-floating btn-lg blue-gradient"><i class="fa fa-google-wallet" aria-hidden="true"></i></a>
        <a type="button" class="btn-floating peach-gradient"><i class="fa fa-envira" aria-hidden="true"></i></a>
        <a type="button" class="btn-floating btn-sm purple-gradient"><i class="fa fa-heart" aria-hidden="true"></i></a>

    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-md-6 col-xl-4 mt-2 text-center mb-r">

        <button type="button" class="btn btn-indigo px-4"><i class="fa fa-tint fa-3x" aria-hidden="true"></i></button>
        <button type="button" class="btn btn-light-blue px-4"><i class="fa fa-bolt fa-2x" aria-hidden="true"></i></button>
        <button type="button" class="btn btn-cyan px-3"><i class="fa fa-users" aria-hidden="true"></i></button>

    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-md-12 col-xl-5 mt-2 text-center">

        <button type="button" class="btn btn-success btn-lg btn-rounded text-lg"><i class="fa fa-apple fa-2x pr-2" aria-hidden="true"></i>One</button>
        <button type="button" class="btn btn-warning btn-rounded"><i class="fa fa-camera pr-2" aria-hidden="true"></i>Two</button>
        <button type="button" class="btn btn-danger btn-sm btn-rounded"><i class="fa fa-plane pr-2 pt-1" aria-hidden="true"></i>Three</button>

    </div>
    <!-- Grid column -->

</div>
<!-- Grid row -->
                
            

Social button icons MDB Pro component

22 22 22 22 22 22
                
<!-- Grid row -->
<div class="row">

    <!-- Grid column -->
    <div class="col-md-12 mb-r">

        <button type="button" class="btn btn-fb"><i class="fa fa-facebook left"></i> Facebook</button>
        <button type="button" class="btn btn-gplus"><i class="fa fa-google-plus left"></i> Google +</button>
        <button type="button" class="btn btn-ins"><i class="fa fa-instagram left"></i> Instagram</button>
        <button type="button" class="btn btn-so"><i class="fa fa-stack-overflow left"></i> Stack Overflow</button>
                                            
    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-md-12 mb-r">
        
        <button type="button" class="btn btn-li"><i class="fa fa-linkedin"></i></button>
        <button type="button" class="btn btn-pin"><i class="fa fa-pinterest"></i></button>
        <button type="button" class="btn btn-dribbble"><i class="fa fa-dribbble left"></i></button>
        <button type="button" class="btn btn-vk"><i class="fa fa-vk"></i></button>
        <button type="button" class="btn btn-git"><i class="fa fa-github"></i></button>
                                            
    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-md-12 mb-r">

        <a type="button" class="btn-floating btn-lg btn-tw"><i class="fa fa-twitter"></i></a>
        <a type="button" class="btn-floating btn-lg btn-yt"><i class="fa fa-youtube"></i></a>
        <a type="button" class="btn-floating btn-dribbble"><i class="fa fa-dribbble"></i></a>
        <a type="button" class="btn-floating btn-so"><i class="fa fa-stack-overflow"></i></a>
        <a type="button" class="btn-floating btn-sm btn-slack"><i class="fa fa-slack"></i></a>
        <a type="button" class="btn-floating btn-sm btn-comm"><i class="fa fa-comments"></i></a>

    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-md-12 mb-r">
        
        <!--Facebook-->
        <button type="button" class="btn btn-fb btn-lg">
            <i class="fa fa-facebook"></i>
        </button>
        <span class="counter">22</span>

        <!--Twitter-->
        <button type="button" class="btn btn-tw btn-lg">
            <i class="fa fa-twitter"></i>
        </button>
        <span class="counter">22</span>

        <!--Google +-->
        <button type="button" class="btn btn-gplus btn-lg">
            <i class="fa fa-google-plus"></i>
        </button>
        <span class="counter">22</span>

        <!--Linkedin-->
        <button type="button" class="btn btn-li btn-lg">
            <i class="fa fa-linkedin"></i>
        </button>
        <span class="counter">22</span>

        <!--Slack-->
        <button type="button" class="btn btn-slack btn-lg">
            <i class="fa fa-slack"></i>
        </button>
        <span class="counter">22</span>

        <!--Emails-->
        <button type="button" class="btn btn-email btn-lg">
            <i class="fa fa-envelope"></i>
        </button>
        <span class="counter">22</span>
                                            
    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-md-12">

        <!--Facebook-->
        <a class="icons-sm fb-ic"><i class="fa fa-facebook fa-2x"> </i></a>
        <!--Twitter-->
        <a class="icons-sm tw-ic"><i class="fa fa-twitter fa-2x"> </i></a>
        <!--Google +-->
        <a class="icons-sm gplus-ic"><i class="fa fa-google-plus fa-2x"> </i></a>
        <!--Linkedin-->
        <a class="icons-sm li-ic"><i class="fa fa-linkedin fa-2x"> </i></a>
        <!--Instagram-->
        <a class="icons-sm ins-ic"><i class="fa fa-instagram fa-2x"> </i></a>
        <!--Pinterest-->
        <a class="icons-sm pin-ic"><i class="fa fa-pinterest fa-2x"> </i></a>
        <!--Slack-->
        <a class="icons-sm slack-ic"><i class="fa fa-slack fa-2x"> </i></a>
        <!--Github-->
        <a class="icons-sm git-ic"><i class="fa fa-github fa-2x"> </i></a>
        <!--Youtube-->
        <a class="icons-sm yt-ic"><i class="fa fa-youtube fa-2x"> </i></a>
        <!--Dribbble-->
        <a class="icons-sm dribbble-ic"><i class="fa fa-dribbble fa-2x"> </i></a>
        <!--Stack Overflow-->
        <a class="icons-sm so-ic"><i class="fa fa-stack-overflow fa-2x"> </i></a>
                                            
    </div>
    <!-- Grid column -->

</div>
<!-- Grid row -->
                
            

Toggle button icon

Panel title

Some quick example text to build on the card title and make up the bulk of the card's content.

                
$('#collapseOne').on('shown.bs.collapse', function () {
   $(".fa").removeClass("fa-folder-o").addClass("fa-folder-open-o");
});

$('#collapseOne').on('hidden.bs.collapse', function () {
   $(".fa").removeClass("fa-folder-open-o").addClass("fa-folder-o");
});
                
            
                
<!-- Grid row -->
<div class="row">

    <!-- Grid column -->
    <div class="col-md-6 col-lg-4">

        <button class="btn btn-default" data-toggle="collapse" data-target="#collapseOne"><i class="fa fa-folder-o pr-2" aria-hidden="true"></i>Open folder</button>
        <div class="collapse" id="collapseOne">
            <!--Panel-->
            <div class="card card-body ml-1">
                <h4 class="card-title">Panel title</h4>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <div class="flex-row">
                    <a class="card-link">Card link</a>
                    <a class="card-link">Another link</a>
                </div>
            </div>
            <!--/.Panel-->
        </div>

    </div>
    <!-- Grid column -->

</div>
<!-- Grid row -->
                
            

Button icons within cascading cards MDB Pro component

Alice Mayer

Photographer

Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Billy Cullen

Web developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.

                
<!-- Grid row -->
<div class="row">

    <!-- Grid column -->
    <div class="col-md-6 col-xl-5 mb-r">

        <!--Card Wider-->
        <div class="card card-cascade wider">

            <!--Card image-->
            <div class="view overlay hm-white-slight">
                <img src="https://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img%20%283%29.jpg" class="img-fluid">
                <a href="#!">
                    <div class="mask"></div>
                </a>
            </div>
            <!--/Card image-->

            <!--Card content-->
            <div class="card-body text-center">
                <!--Title-->
                <h4 class="card-title"><strong>Alice Mayer</strong></h4>
                <h5 class="indigo-text"><strong>Photographer</strong></h5>

                <p class="card-text">Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam. </p>

                
                <!--Linkedin-->
                <a class="icons-sm li-ic"><i class="fa fa-linkedin"> </i></a>
                <!--Twitter-->
                <a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a>
                <!--Dribbble-->
                <a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a>

            </div>
            <!--/.Card content-->

        </div>
        <!--/.Card Wider-->

    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-md-6 col-xl-5">

        <!--Card Regular-->
        <div class="card card-cascade narrower">

            <!--Card image-->
            <div class="view overlay hm-white-slight">
                <img src="https://mdbootstrap.com/img/Photos/Others/men.jpg" class="img-fluid" alt="">
                <a>
                    <div class="mask"></div>
                </a>
            </div>
            <!--/.Card image-->

            <!--Card content-->
            <div class="card-body text-center">
                <!--Title-->
                <h4 class="card-title"><strong>Billy Cullen</strong></h4>
                <h5>Web developer</h5>

                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.
                </p>

                <!--Facebook-->
                <a type="button" class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"></i></a>
                <!--Twitter-->
                <a type="button" class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"></i></a>
                <!--Google +-->
                <a type="button" class="btn-floating btn-small btn-dribbble"><i class="fa fa-dribbble"></i></a>

            </div>
            <!--/.Card content-->

        </div>
        <!--/.Card Regular-->

    </div>
    <!-- Grid column -->

</div>
<!-- Grid row -->
                
            

Button icons within overlay cards MDB Pro component

Marketing

This is card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!.

View project
Software

This is card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!.

View project
                
<!-- Grid row -->
<div class="row">

    <!-- Grid column -->
    <div class="col-md-6 mb-r">

        <!-- Card -->
        <div class="card card-image mb-3" style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.jpg);">

            <!-- Content -->
            <div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
                <div>
                    <h5 class="pink-text"><i class="fa fa-pie-chart"></i> Marketing</h5>
                    <h3 class="card-title pt-2"><strong>This is card title</strong></h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem,
                        optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos.
                        Odit sed qui, dolorum!.</p>
                    <a class="btn btn-pink"><i class="fa fa-clone left"></i> View project</a>
                </div>
            </div>
            <!-- Content -->
            
        </div>
        <!-- Card -->

    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-md-6">
        <div class="card card-image mb-3" style="background-image: url('https://mdbootstrap.com/img/Photos/Horizontal/City/6-col/img%20(47).jpg');">
            <div class="text-white text-center d-flex align-items-center rgba-indigo-strong py-5 px-4">
                <div>
                    <h5 class="orange-text"><i class="fa fa-desktop"></i> Software</h5>
                    <h3 class="card-title pt-2"><strong>This is card title</strong></h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem,
                        optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos.
                        Odit sed qui, dolorum!.</p>
                    <a class="btn btn-deep-orange"><i class="fa fa-clone left"></i> View project</a>
                </div>
            </div>
        </div>
    </div>
    <!-- Grid column -->

</div>
<!-- Grid row -->
                
            

Button icons within pills MDB Pro component


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.

                
<!-- Grid row -->
<div class="row">

    <!-- Grid column -->
    <div class="col-md-2 col-lg-2">

        <ul class="nav md-pills pills-info">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#panel21" role="tab"><i class="fa fa-diamond pr-xl-2 pr-md-0 pr-2"></i>Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel22" role="tab"><i class="fa fa-credit-card pr-xl-2 pr-md-0 pr-2"></i>Pricing</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel23" role="tab"><i class="fa fa-coffee pr-xl-2 pr-md-0 pr-2"></i>Lifestyle</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#panel24" role="tab"><i class="fa fa-pencil pr-xl-2 pr-md-0 pr-2"></i>Design</a>
            </li>
        </ul>


    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-md-9 col-lg-8 ml-xl-0 ml-4">

        <!-- Tab panels -->
        <div class="tab-content">

            <!--Panel 1-->
            <div class="tab-pane fade in show active" id="panel21" role="tabpanel">
                <br>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
                    reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
                    porro voluptate odit minima.</p>

            </div>
            <!--/.Panel 1-->

            <!--Panel 2-->
            <div class="tab-pane fade" id="panel22" role="tabpanel">
                <br>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
                    reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
                    porro voluptate odit minima.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
                    reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
                    porro voluptate odit minima.</p>

            </div>
            <!--/.Panel 2-->

            <!--Panel 3-->
            <div class="tab-pane fade" id="panel23" role="tabpanel">
                <br>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
                    reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
                    porro voluptate odit minima.</p>

            </div>
            <!--/.Panel 3-->

            <!--Panel 4-->
            <div class="tab-pane fade" id="panel24" role="tabpanel">
                <br>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
                    reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
                    porro voluptate odit minima.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus
                    reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione
                    porro voluptate odit minima.</p>

            </div>
            <!--/.Panel 4-->

        </div>

    </div>
    <!-- Grid column -->

</div>
<!-- Grid row -->
                
            

Button icons within modals MDB Pro component

                
<!--Modal: Login / Register Form-->
<div class="modal fade" id="modalLRForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog cascading-modal" role="document">
        <!--Content-->
        <div class="modal-content">

            <!--Modal cascading tabs-->
            <div class="modal-c-tabs">

                <!-- Nav tabs -->
                <ul class="nav nav-tabs tabs-2 light-blue darken-3" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#panel7" role="tab"><i class="fa fa-user mr-1"></i> Login</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#panel8" role="tab"><i class="fa fa-user-plus mr-1"></i> Register</a>
                    </li>
                </ul>

                <!-- Tab panels -->
                <div class="tab-content">
                    <!--Panel 7-->
                    <div class="tab-pane fade in show active" id="panel7" role="tabpanel">

                        <!--Body-->
                        <div class="modal-body mb-1">
                            <div class="md-form form-sm">
                                <i class="fa fa-envelope prefix"></i>
                                <input type="text" id="form22" class="form-control">
                                <label for="form22">Your email</label>
                            </div>

                            <div class="md-form form-sm">
                                <i class="fa fa-lock prefix"></i>
                                <input type="password" id="form23" class="form-control">
                                <label for="form23">Your password</label>
                            </div>
                            <div class="text-center mt-2">
                                <button class="btn btn-info">Log in <i class="fa fa-sign-in ml-1"></i></button>
                            </div>
                        </div>
                        <!--Footer-->
                        <div class="modal-footer">
                            <div class="options text-center text-md-right mt-1">
                                <p>Not a member? <a href="#" class="blue-text">Sign Up</a></p>
                                <p>Forgot <a href="#" class="blue-text">Password?</a></p>
                            </div>
                            <button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Close</button>
                        </div>

                    </div>
                    <!--/.Panel 7-->

                    <!--Panel 8-->
                    <div class="tab-pane fade" id="panel8" role="tabpanel">

                        <!--Body-->
                        <div class="modal-body">
                            <div class="md-form form-sm">
                                <i class="fa fa-envelope prefix"></i>
                                <input type="text" id="form24" class="form-control">
                                <label for="form24">Your email</label>
                            </div>

                            <div class="md-form form-sm">
                                <i class="fa fa-lock prefix"></i>
                                <input type="password" id="form25" class="form-control">
                                <label for="form25">Your password</label>
                            </div>

                            <div class="md-form form-sm">
                                <i class="fa fa-lock prefix"></i>
                                <input type="password" id="form26" class="form-control">
                                <label for="form26">Repeat password</label>
                            </div>

                            <div class="text-center form-sm mt-2">
                                <button class="btn btn-info">Sign up <i class="fa fa-sign-in ml-1"></i></button>
                            </div>

                        </div>
                        <!--Footer-->
                        <div class="modal-footer">
                            <div class="options text-right">
                                <p class="pt-1">Already have an account? <a href="#" class="blue-text">Log In</a></p>
                            </div>
                            <button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                    <!--/.Panel 8-->
                </div>

            </div>
        </div>
        <!--/.Content-->
    </div>
</div>
<!--Modal: Login / Register Form-->
                
            

Button icons within form MDB Pro component

Sign in

Forgot Password?

or Sign in with:

                
.form-elegant .font-small {
  font-size: 0.8rem; }

.form-elegant .z-depth-1a {
  -webkit-box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25);
  box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25); }

.form-elegant .z-depth-1-half,
.form-elegant .btn:hover {
  -webkit-box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15);
  box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15); }
                
            
                
<section class="form-elegant">

    <!--Form without header-->
    <div class="card">

        <div class="card-body mx-4">

            <!--Header-->
            <div class="text-center">
                <h3 class="dark-grey-text mb-5"><strong>Sign in</strong></h3>
            </div>

            <!--Body-->
            <div class="md-form">
                <input type="text" id="Form-email1" class="form-control">
                <label for="Form-email1">Your email</label>
            </div>

            <div class="md-form pb-3">
                <input type="password" id="Form-pass1" class="form-control">
                <label for="Form-pass1">Your password</label>
                <p class="font-small blue-text d-flex justify-content-end">Forgot <a href="#" class="blue-text ml-1"> Password?</a></p>
            </div>

            <div class="text-center mb-3">
                <button type="button" class="btn blue-gradient btn-block btn-rounded z-depth-1a">Sign in</button>
            </div>
            <p class="font-small dark-grey-text text-right d-flex justify-content-center mb-3 pt-2"> or Sign in with:</p>

                <div class="row my-3 d-flex justify-content-center">
                    <!--Facebook-->
                    <button type="button" class="btn btn-white btn-rounded mr-md-3 z-depth-1a"><i class="fa fa-facebook blue-text text-center"></i></button>
                    <!--Twitter-->
                    <button type="button" class="btn btn-white btn-rounded mr-md-3 z-depth-1a"><i class="fa fa-twitter blue-text"></i></button>
                    <!--Google +-->
                    <button type="button" class="btn btn-white btn-rounded z-depth-1a"><i class="fa fa-google-plus blue-text"></i></button>
                </div>

        </div>

        <!--Footer-->
        <div class="modal-footer mx-5 pt-3 mb-1">
            <p class="font-small grey-text d-flex justify-content-end">Not a member? <a href="#" class="blue-text ml-1"> Sign Up</a></p>
        </div>

    </div>
    <!--/Form without header-->

</section>