I previously blogged about how to add a circle border around a Font Awesome icon back in 2019, but since then things have changed and Bootstrap now has their own icons, Bootstrap Icons. Can that same code be used today for Bootstrap 5 and their icons?
The answer is pretty much, yes! The HTML and CSS code is identical with a few small edits. I made a few notes further down below about some changes to the CSS you can make. Please note that the below code is using Bootstrap 5.2.3 and Bootstrap Icons 1.10.3, and it displays a blue building icon with a red circle around it. Obviously, you can change the colors to your liking.
CSS Code
<!--Copy and paste inside the <head> tag-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
<style>
.icon-flex, .icon-wrapper {
display: flex;
justify-content: center;
align-items: center;
}
.icon-wrapper {
border-radius: 50%;
overflow: hidden;
border: 1px solid red;
font-size: 5rem;
width: 8rem;
height: 8rem;
}
.icon-wrapper .bi {
color: blue;
}
</style>HTML Code
<!--Copy and paste inside the <body> tag-->
<div class="icon-flex">
<div class="icon-wrapper"><i class="bi bi-building"></i></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>A few notes about my CSS code
- In the “.icon-wrapper” class…
- You can change the color and thickness of the border by editing the “border”
- You can change the size of the icon by editing the “font-size”
- You can change the size of the circle by editing the “width” and “height”
- In the “.icon-wrapper .bi” class…
- You can change the color of the icon by editing the “color”
Please let me know your thoughts about this code and if you have a better or more efficient way to do this. Always feel free to share your knowledge and thank you for reading this blog post.
Leave a Reply