Bootstrap 5 Buttons with Icon and Text Tutorial & Demo

Do you want to create Bootstrap 5 buttons? Well! this code snippet will help you to create buttons with text and icon for Bootstrap 5 projects. You can directly download this button pack or follow the following guide to create iconic buttons.

How to Create Bootstrap 5 Buttons with Icon and Text

1. First of all, load the Bootstrap 5 CSS and Font Awesome icons by adding the following CDN link in the head tag of your webpage.

<!-- Bootstrap 5 CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

2. In the second step, create Bootstrap 5 buttons and place Font Awesome icons inside the label tag:

<div class="container">
   <div class="row">
      <div class="col-md-12">
         <h2>Bootstrap 5 Buttons with Icons</h2>
         <button type="button" class="btn btn-labeled btn-success">
         <span class="btn-label"><i class="fa fa-check"></i></span>Success</button>
         <button type="button" class="btn btn-labeled btn-danger">
         <span class="btn-label"><i class="fa fa-remove"></i></span>Cancel</button>
         <button type="button" class="btn btn-labeled btn-warning">
         <span class="btn-label"><i class="fa fa-bookmark"></i></span>Bookmark</button>
         <button type="button" class="btn btn-labeled btn-primary">
         <span class="btn-label"><i class="fa fa-camera"></i></span>Camera</button>
         <br>
         <button type="button" class="btn btn-labeled btn-default">
         <span class="btn-label"><i class="fa fa-chevron-left"></i></span>Left</button>
         <button type="button" class="btn btn-labeled btn-default">
         <span class="btn-label"><i class="fa fa-chevron-right"></i></span>
         Right</button>
         <button type="button" class="btn btn-labeled btn-success">
         <span class="btn-label"><i class="fa fa-thumbs-up"></i></span>Thumbs
         Up</button>
         <button type="button" class="btn btn-labeled btn-danger">
         <span class="btn-label"><i class="fa fa-thumbs-down"></i></span>Thumbs
         Down</button>
         <br>
         <button type="button" class="btn btn-labeled btn-info">
         <span class="btn-label"><i class="fa fa-refresh"></i></span>Refresh</button>
         <button type="button" class="btn btn-labeled btn-danger">
         <span class="btn-label"><i class="fa fa-trash"></i></span>Trash</button>
      </div>
   </div>
</div>

3. Now, adjust the buttons icons with additional CSS styles.

.btn-label {
	position: relative;
	left: -12px;
	display: inline-block;
	padding: 6px 12px;
	background: rgba(0, 0, 0, 0.15);
	border-radius: 3px 0 0 3px;
}
 
.btn-labeled {
	padding-top: 0;
	padding-bottom: 0;
}
 
.btn {
	margin-bottom: 10px;
}

All finished! I hope you like this button pack if you have any questions or suggestions please let me know by comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.