Bootstrap 5 Buttons with Icon and Text Tutorial & Demo

Bootstrap 5 Buttons with Icon and Text
Code Snippet:Bootstrap 5 Buttons
Author: Asif Mughal
Published: January 11, 2024
Last Updated: January 22, 2024
Downloads: 105,040
License: MIT
Edit Code online: CodeHim
Read More

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.

2 thoughts on “Bootstrap 5 Buttons with Icon and Text Tutorial & Demo”

  1. What if the button has a width? The left positioning would then have to be manually adjusted for each button width. Is there a better way?

    Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X