Icon Button
Bootstrap Icon Button
Bootstrap's icon button is a combination of a standard Bootstrap button with Font Awesome icon inside it. It may contain an icon only or text with an icon.
Since icons are generally used to deal with the intuitiveness of UI design, Bootstrap icon buttons tend to increase it.
It can either be used as icon only an icon + text combination.
Take a look at the following Bootstrap icon buttons examples:
Basic example
Font Awesome icons
Within an MDB project you can use more than 1400 icons. Check out our documentation page to learn about all of the possible icons.
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-12 mb-4">
<button type="button" class="btn btn-primary px-3"><i class="fab fa-android" aria-hidden="true"></i></button>
<button type="button" class="btn btn-default px-3"><i class="fas fa-balance-scale" aria-hidden="true"></i></button>
<button type="button" class="btn btn-secondary px-3"><i class="fas fa-birthday-cake" aria-hidden="true"></i></button>
<button type="button" class="btn btn-success px-3"><i class="far fa-thumbs-up" aria-hidden="true"></i></button>
<button type="button" class="btn btn-info px-3"><i class="fas fa-tint" aria-hidden="true"></i></button>
<button type="button" class="btn btn-warning px-3"><i class="fas fa-bolt" aria-hidden="true"></i></button>
<button type="button" class="btn btn-danger px-3"><i class="fas fa-users" aria-hidden="true"></i></button>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-12 mb-4">
<button type="button" class="btn btn-elegant"><i class="far fa-user pr-2" aria-hidden="true"></i>User</button>
<button type="button" class="btn btn-unique"><i class="fas fa-wifi pr-2" aria-hidden="true"></i>Wifi</button>
<button type="button" class="btn btn-pink"><i class="fas fa-plane pr-2" aria-hidden="true"></i>Plane</button>
<button type="button" class="btn btn-purple"><i class="fas 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="fas fa-trophy"
aria-hidden="true"></i></button>
<button type="button" class="btn btn-outline-info waves-effect px-3"><i class="fas fa-thumbtack"
aria-hidden="true"></i></button>
<button type="button" class="btn btn-outline-warning waves-effect px-3"><i class="fas fa-rocket" aria-hidden="true"></i></button>
<button type="button" class="btn btn-outline-primary waves-effect"><i class="fas fa-sun pr-2" aria-hidden="true"></i>Sunny</button>
<button type="button" class="btn btn-outline-default waves-effect"><i class="fas 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-4">
<a type="button" class="btn-floating deep-purple"><i class="fab fa-youtube" aria-hidden="true"></i></a>
<a type="button" class="btn-floating indigo"><i class="fab fa-google-wallet" aria-hidden="true"></i></a>
<a type="button" class="btn-floating light-blue"><i class="fab fa-envira" aria-hidden="true"></i></a>Basic example
<a type="button" class="btn-floating cyan"><i class="fab fa-apple" aria-hidden="true"></i></a>
<a type="button" class="btn-floating teal"><i class="fas fa-arrows-alt" aria-hidden="true"></i></a>
<a type="button" class="btn-floating light-green"><i class="far fa-hand-point-right" aria-hidden="true"></i></a>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-12 mb-4">
<button type="button" class="btn btn-rounded btn-amber"><i class="fas fa-th-list pr-2" aria-hidden="true"></i>List</button>
<button type="button" class="btn btn-rounded btn-brown"><i class="fas fa-redo pr-2" aria-hidden="true"></i>Rotate</button>
<button type="button" class="btn btn-rounded btn-blue-grey"><i class="far fa-save pr-2" aria-hidden="true"></i>Floppy</button>
<button type="button" class="btn btn-rounded btn-primary"><i class="fab 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="fas fa-cogs pr-2"
aria-hidden="true"></i>Success</button>
<button type="button" class="btn btn-outline-info btn-rounded waves-effect"><i class="fas fa-wheelchair pr-2"
aria-hidden="true"></i>Info</button>
<button type="button" class="btn btn-outline-warning btn-rounded waves-effect"><i class="fas fa-car pr-2"
aria-hidden="true"></i>Warning</button>
<button type="button" class="btn btn-outline-danger btn-rounded waves-effect"><i class="fas fa-train pr-2"
aria-hidden="true"></i>Danger</button>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
Button icons sizing MDB Pro component
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-6 col-xl-3 text-center mb-4">
<a type="button" class="btn-floating btn-lg blue-gradient"><i class="fab fa-google-wallet" aria-hidden="true"></i></a>
<a type="button" class="btn-floating peach-gradient"><i class="fab fa-envira" aria-hidden="true"></i></a>
<a type="button" class="btn-floating btn-sm purple-gradient"><i class="fas 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-4">
<button type="button" class="btn btn-indigo px-4"><i class="fas fa-tint fa-3x" aria-hidden="true"></i></button>
<button type="button" class="btn btn-light-blue px-4"><i class="fas fa-bolt fa-2x" aria-hidden="true"></i></button>
<button type="button" class="btn btn-cyan px-3"><i class="fas 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="fab fa-apple fa-2x pr-2"
aria-hidden="true"></i>One</button>
<button type="button" class="btn btn-warning btn-rounded"><i class="fas fa-camera pr-2" aria-hidden="true"></i>Two</button>
<button type="button" class="btn btn-danger btn-sm btn-rounded"><i class="fas fa-plane pr-2 pt-1"
aria-hidden="true"></i>Three</button>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
.btn .fa.fa-3x {
font-size: 3em;
}
.btn .fa.fa-2x {
font-size: 2em;
}
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.
<!-- 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="fas fa-folder-open 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 -->
$('#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");
});
Button icons within cascading cards MDB Pro component
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-6 col-xl-5 mb-4">
<!--Card Wider-->
<div class="card card-cascade wider">
<!--Card image-->
<div class="view view-cascade overlay">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img%20%283%29.webp" class="card-img-top">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--/Card image-->
<!--Card content-->
<div class="card-body card-body-cascade 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="fab fa-linkedin-in"> </i></a>
<!--Twitter-->
<a class="icons-sm tw-ic"><i class="fab fa-twitter"> </i></a>
<!--Dribbble-->
<a class="icons-sm fb-ic"><i class="fab fa-facebook-f"> </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 view-cascade overlay">
<img src="https://mdbootstrap.com/img/Photos/Others/men.webp" class="card-img-top" alt="">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-body card-body-cascade 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="fab fa-facebook-f"></i></a>
<!--Twitter-->
<a type="button" class="btn-floating btn-small btn-tw"><i class="fab fa-twitter"></i></a>
<!--Google +-->
<a type="button" class="btn-floating btn-small btn-dribbble"><i class="fab 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 a 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 projectSoftware
This is a 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-4">
<!-- 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.webp);">
<!-- 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="fas fa-chart-pie"></i> Marketing</h5>
<h3 class="card-title pt-2"><strong>This is a 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="fas 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).webp');">
<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="fas fa-desktop"></i> Software</h5>
<h3 class="card-title pt-2"><strong>This is a 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="fas 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="far fa-gem 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="fas 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="fas 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="fas fa-pencil-alt 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 md-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="fas 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="fas 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="fas 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="fas 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="fas fa-sign-in-alt 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="fas 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="fas 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="fas 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="fas fa-sign-in-alt 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
<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="fab fa-facebook-f blue-text text-center"></i></button>
<!--Twitter-->
<button type="button" class="btn btn-white btn-rounded mr-md-3 z-depth-1a"><i class="fab fa-twitter blue-text"></i></button>
<!--Google +-->
<button type="button" class="btn btn-white btn-rounded z-depth-1a"><i class="fab fa-google-plus-g 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>
.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);
}
Social button icons MDB Pro component
<!-- Grid row --> <div class="row"> <!-- Grid column --> <div class="col-md-12 mb-4"> <button type="button" class="btn btn-fb"><i class="fab fa-facebook-f left"></i> Facebook</button> <button type="button" class="btn btn-gplus"><i class="fab fa-google-plus-g left"></i> Google +</button> <button type="button" class="btn btn-ins"><i class="fab fa-instagram left"></i> Instagram</button> <button type="button" class="btn btn-so"><i class="fab fa-stack-overflow left"></i> Stack Overflow</button> </div> <!-- Grid column --> <!-- Grid column --> <div class="col-md-12 mb-4"> <button type="button" class="btn btn-li"><i class="fab fa-linkedin-in"></i></button> <button type="button" class="btn btn-pin"><i class="fab fa-pinterest"></i></button> <button type="button" class="btn btn-dribbble"><i class="fab fa-dribbble left"></i></button> <button type="button" class="btn btn-vk"><i class="fab fa-vk"></i></button> <button type="button" class="btn btn-git"><i class="fab fa-github"></i></button> </div> <!-- Grid column --> <!-- Grid column --> <div class="col-md-12 mb-4"> <a type="button" class="btn-floating btn-lg btn-tw"><i class="fab fa-twitter"></i></a> <a type="button" class="btn-floating btn-lg btn-yt"><i class="fab fa-youtube"></i></a> <a type="button" class="btn-floating btn-dribbble"><i class="fab fa-dribbble"></i></a> <a type="button" class="btn-floating btn-so"><i class="fab fa-stack-overflow"></i></a> <a type="button" class="btn-floating btn-sm btn-slack"><i class="fab fa-slack-hash"></i></a> <a type="button" class="btn-floating btn-sm btn-comm"><i class="far fa-comments"></i></a> </div> <!-- Grid column --> <!-- Grid column --> <div class="col-md-12 mb-4"> <!--Facebook--> <button type="button" class="btn btn-fb btn-lg"> <i class="fab fa-facebook-f"></i> </button> <span class="counter">22</span> <!--Twitter--> <button type="button" class="btn btn-tw btn-lg"> <i class="fab fa-twitter"></i> </button> <span class="counter">22</span> <!--Google +--> <button type="button" class="btn btn-gplus btn-lg"> <i class="fab fa-google-plus-g"></i> </button> <span class="counter">22</span> <!--Linkedin--> <button type="button" class="btn btn-li btn-lg"> <i class="fab fa-linkedin-in"></i> </button> <span class="counter">22</span> <!--Slack--> <button type="button" class="btn btn-slack btn-lg"> <i class="fab fa-slack-hash"></i> </button> <span class="counter">22</span> <!--Emails--> <button type="button" class="btn btn-email btn-lg"> <i class="fas 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="fab fa-facebook-f fa-2x"> </i></a> <!--Twitter--> <a class="icons-sm tw-ic"><i class="fab fa-twitter fa-2x"> </i></a> <!--Google +--> <a class="icons-sm gplus-ic"><i class="fab fa-google-plus-g fa-2x"> </i></a> <!--Linkedin--> <a class="icons-sm li-ic"><i class="fab fa-linkedin-in fa-2x"> </i></a> <!--Instagram--> <a class="icons-sm ins-ic"><i class="fab fa-instagram fa-2x"> </i></a> <!--Pinterest--> <a class="icons-sm pin-ic"><i class="fab fa-pinterest fa-2x"> </i></a> <!--Slack--> <a class="icons-sm slack-ic"><i class="fab fa-slack-hash fa-2x"> </i></a> <!--Github--> <a class="icons-sm git-ic"><i class="fab fa-github fa-2x"> </i></a> <!--Youtube--> <a class="icons-sm yt-ic"><i class="fab fa-youtube fa-2x"> </i></a> <!--Dribbble--> <a class="icons-sm dribbble-ic"><i class="fab fa-dribbble fa-2x"> </i></a> <!--Stack Overflow--> <a class="icons-sm so-ic"><i class="fab fa-stack-overflow fa-2x"> </i></a> </div> <!-- Grid column --> </div> <!-- Grid row -->