Bootstrap 4 Icon button
Bootstrap 4 Icon button plugin
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.
Basic Bootstrap 4 version
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-12 mb-4">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary px-3"><i class="fab fa-android" aria-hidden="true"></i></button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-default px-3"><i class="fas fa-balance-scale" aria-hidden="true"></i></button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-secondary px-3"><i class="fas fa-birthday-cake" aria-hidden="true"></i></button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-success px-3"><i class="far fa-thumbs-up" aria-hidden="true"></i></button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-info px-3"><i class="fas fa-tint" aria-hidden="true"></i></button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-warning px-3"><i class="fas fa-bolt" aria-hidden="true"></i></button>
<button type="button" data-mdb-button-init data-mdb-ripple-init 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" data-mdb-button-init data-mdb-ripple-init class="btn btn-elegant"><i class="far fa-user pr-2" aria-hidden="true"></i>User</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-unique"><i class="fas fa-wifi pr-2" aria-hidden="true"></i>Wifi</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-pink"><i class="fas fa-plane pr-2" aria-hidden="true"></i>Plane</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init 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" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-secondary waves-effect px-3"><i class="fas fa-trophy"
aria-hidden="true"></i></button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-info waves-effect px-3"><i class="fas fa-thumbtack"
aria-hidden="true"></i></button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-warning waves-effect px-3"><i class="fas fa-rocket" aria-hidden="true"></i></button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-primary waves-effect"><i class="fas fa-sun pr-2" aria-hidden="true"></i>Sunny</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init 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 -->
Above is an example template for an Icon button in the Bootstrap 4 version based on jQuery. V4 is an older version of Bootstrap and we discourage implementing it in new projects.
Below you will find the same component but in the latest, more modern Bootstrap 5. We encourage you to use the v5 version instead, the v5 is more lightweight, more reliable and based on pure JavaScript instead of jQuery.
This page only compares the two version, you can find full documentation - with multiple options & API details via one of the links below:
Bootstrap v5 - full documentation
Bootstrap v4 - full documentation
Basic Bootstrap 5 version
<!-- Facebook -->
<a data-mdb-ripple-init class="btn text-white" style="background-color: #3b5998;" href="#!" role="button">
<i class="fab fa-facebook-f"></i>
</a>
<!-- Twitter -->
<a data-mdb-ripple-init class="btn text-white" style="background-color: #55acee;" href="#!" role="button">
<i class="fab fa-twitter"></i>
</a>
<!-- Google -->
<a data-mdb-ripple-init class="btn text-white" style="background-color: #dd4b39;" href="#!" role="button">
<i class="fab fa-google"></i>
</a>
<!-- Instagram -->
<a data-mdb-ripple-init class="btn text-white" style="background-color: #ac2bac;" href="#!" role="button">
<i class="fab fa-instagram"></i>
</a>
<!-- Linkedin -->
<a data-mdb-ripple-init class="btn text-white" style="background-color: #0082ca;" href="#!" role="button">
<i class="fab fa-linkedin-in"></i>
</a>
<!-- Pinterest -->
<a data-mdb-ripple-init class="btn text-white" style="background-color: #c61118;" href="#!" role="button">
<i class="fab fa-pinterest"></i>
</a>
<!-- Vkontakte -->
<a data-mdb-ripple-init class="btn text-white" style="background-color: #4c75a3;" href="#!" role="button">
<i class="fab fa-vk"></i>
</a>
<!-- Stack overflow -->
<a data-mdb-ripple-init class="btn text-white" style="background-color: #ffac44;" href="#!" role="button">
<i class="fab fa-stack-overflow"></i>
</a>
<!-- Youtube -->
<a data-mdb-ripple-init class="btn text-white" style="background-color: #ed302f;" href="#!" role="button">
<i class="fab fa-youtube"></i>
</a>
<!-- Slack -->
<a data-mdb-ripple-init class="btn text-white" style="background-color: #481449;" href="#!" role="button">
<i class="fab fa-slack-hash"></i>
</a>
<!-- Github -->
<a data-mdb-ripple-init class="btn text-white" style="background-color: #333333;" href="#!" role="button">
<i class="fab fa-github"></i>
</a>
<!-- Dribbble -->
<a data-mdb-ripple-init class="btn text-white" style="background-color: #ec4a89;" href="#!" role="button">
<i class="fab fa-dribbble"></i>
</a>
<!-- Reddit -->
<a data-mdb-ripple-init class="btn text-white" style="background-color: #ff4500;" href="#!" role="button">
<i class="fab fa-reddit-alien"></i>
</a>
<!-- Whatsapp -->
<a data-mdb-ripple-init class="btn text-white" style="background-color: #25d366;" href="#!" role="button">
<i class="fab fa-whatsapp"></i>
</a>