I was recently working on building a webpage and I ran into an issue where I wanted to add a circular border around an icon. I was using Bootstrap 4 for the page’s layout and Font Awesome for the icons. I tried a few things with Bootstrap’s border utilities but it couldn’t do what I wanted, so I searched online.
I was able to find this CodePen solution to my problem. I made some edits to the code for my webpage, which I have provided below.
HTML Code
<div class="icon-flex">
<div class="icon-wrapper"><i class="far fa-user"></i></div>
</div>
CSS Code
.icon-flex, .icon-wrapper {
display: flex;
justify-content: center;
align-items: center;
}
.icon-wrapper {
border-radius: 50%;
overflow: hidden;
border: 1px solid blue;
font-size: 3rem;
width: 80px;
height: 80px;
}
.icon-wrapper i {
color: blue;
}
Few notes about my CSS code
- If you increase or decrease the “font-size” value in the “icon-wrapper” class, it will make the icon larger or smaller.
- If you increase or decrease the “width” and “height” values in the “icon-wrapper” class, it will make the circular border larger or smaller.
Let me know your thoughts about this solution. If you know of a better way to do this, please leave a comment and share your knowledge.
Leave a Reply