The example above uses Bootstrap's built-in classes along with the Font Awesome icon library for the icon:
btn
: This class is used to style the button in Bootstrap.btn-primary
: This is the button color class (you can change it to any other btn-*
class, like btn-secondary
, btn-success
, etc.).i
tag with fa-solid fa-house-chimney
: This adds the icon inside the button using Font Awesome..btn-demo
(see the CSS code below) is used to make the button appear rounded.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
.btn-demo {
width: 40px;
height: 40px;
font-size: 1em;
border-radius: 100%;
padding: 8px;
text-align: center;
border: 1px solid #ffffff;
outline: 1px solid rgba(255, 255, 255, 0.60);
outline-offset: 4px;
}