How to create button with icon in bootstrap?
January 29, 2023Hi Friends 👋,
Welcome To aGuideHub! ❤️
To create button with icon in bootstrap, use the <button type="button" class="btn btn-labeled btn-success"><span class="btn-label"><i class="fa fa-check"></i></span>Success</button>. It will create button with the icon in bootstrap.
Today, I am going to show you. how to create button with icon in bootstrap with code example.
Table of contents
- Includes bootstrap view
- Includes bootstrap library
- Example of button icon in bootstrap
This article will guide you to create button with icon in bootstrap with an example.
Includes bootstrap view
To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">Includes bootstrap library
First of all, load the Bootstrap framework CSS into the head tag of your webpage.
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">Example of button icon in bootstrap
In this example, we will use the button with bootstrap cdn class btn-success and use the icon with font-awesome class fa fa-check.
Let’s look at the following example to understand how it works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Create a button with a background image in bootstrap</title>
<!-- Bootstrap 5 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Font Awesome CSS -->
<style>
.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;
}
</style>
</head>
<body>
<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>
</div>
</div>
</div>
</body>
</html>Check the output of the above code example.
Try the below codesandbox link to customize the above example as per your requirement.
All the best 👍