Bootstrap provides a number of helpful elements for creating buttons in different colors, text an icon, etc. In this blog post, we’ll take a look at how to create a bootstrap button with an icon and text. We’ll also explore some of the different options you have for styling your bootstrap buttons. So, if you’re looking to add some style to your next project, keep reading!
Every website has buttons for creating action or triggering an event from the user. It is important the button should be looking nice and beautiful so the webpage looks nice.
If you are using the bootstrap frame while building your website then you know that you can easily create a button by simply adding the right button class. In this tutorial, you will learn how you can add icons to the button and text to add extra meaning to the button.
Default Bootstrap Button
Bootstrap has predefined buttons with different color options. For example, if you want successful action you can add btn-success class to the button to create a green color button.
Let’s take a look at the bootstrap button classes:
1. The btn the class provides gives basic structure to the button like padding, border, borer-radius, etc.
2. The classes like btn-primary, btn-danger, btn-success, etc use to define the background color, color, border-color, etc to the button.
Take a look at the example of the bootstrap button.
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
<button class="btn btn-warning">Warning Button</button>
<button class="btn btn-danger">Danger Button</button>
<button class="btn btn-info">Info Button</button>
<button class="btn btn-dark">Dark Button</button>
<button class="btn btn-success">Success Button</button>
Font-Awesome Icons
Bootstrap doesn’t have an icons library for adding icons so you need to consider CSS, SVG, or other external resources to add the icons to the button. Here we will use font-awesome as an external resource to get free icons.
To use font-awesome icons we will use CDN (content delivery network) on a webpage in the head section.
<head>
<title>font awesome icons</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
To add the icon, you simply need to add the icon class in the <i> tag and insert it between the buttons tag.
<i class="fa fa-ban"></i>
<i class="fa fa-trash"></i>
<i class="fa fa-home"></i>
<i class="fa fa-bars"></i>
<i class="fa fa-star"></i>
Icon Styling
To have more control over the icon style we will add a span tag so we can style it as we want. We can also separate the icon and text so we can adjust the icons as we want. Moreover, we can style the icon’s background color, etc differently.
<span class="btn-label">
<i class="fa fa-facebook"></i>
</span>
Bootstrap Button with Icon and Text
So now we will create a bootstrap button with icons and text by following these points.
- Make a button using bootstrap with
.btnclass. - To give different colors we will add btn-* class to the button.
- We will place a
spantag with the class btn-label for additional customization to the icon area. - Next, we will create
<i>tag and add fa fa-* class to insert the icon to the button. - Lastly, we will add text to the button.
Here is the HTML code of the above steps:
<button type="button" class="btn btn-labeled btn-success"> <span class="btn-label"><i class="fa fa-check"></i></span>Success Message</button>
<button type="button" class="btn btn-labeled btn-danger"> <span class="btn-label"><i class="fa fa-remove"></i></span>You can Cancel</button>
<button type="button" class="btn btn-labeled btn-warning"> <span class="btn-label"><i class="fa fa-bookmark"></i></span>Please Bookmark</button>
<button type="button" class="btn btn-labeled btn-primary"> <span class="btn-label"><i class="fa fa-camera"></i></span>Open Camera</button>
Loading Source Files
It is important to remember that you are using Bootstrap 5 CSS and Font Awesome icons file in your webpage. You can add the files using the following CDN links in the head tag of the 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">
Additional CSS
The additional CSS style needs to adjust the buttons icons. You can easily customize them by adding unique background color, icon color, applying a border, etc.
<style>
.btn-label {
position: relative;
left: -12px;
display: inline-block;
padding: 10px 15px;
border-radius: 5px 0 0 5px;
border-right: solid 1px rgba(0, 0, 0, 0.15);
}
.btn-labeled {
padding-top: 0;
padding-bottom: 0;
}
.btn {
margin: 12px 12px;
}
</style>
Conclusion
In the end, we created a nice-looking bootstrap button with icons and text that enhance your site’s look and feel. By using this tutorial you can add text and icons to any button on your website and display the button anywhere on the webpage.