Search code examples
htmliconsbootstrap-5bootstrap-icons

How to center a bootsrap icon inside of a circle container

I'm trying to create a circular border around an icon. So that it looks similar to the design. I can center the icon when it's not inside of the container but as soon as I put the round container around the icon it doesn't stay central. Any ideas?

<div class="row">
    <div class="col-1 d-flex justify-content-center align-items-center">
        <div class="container border border-primary rounded-circle">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-briefcase" viewBox="0 0 16 16">
                <path d="M6.5 1A1.5 1.5 0 0 0 5 2.5V3H1.5A1.5 1.5 0 0 0 0 4.5v8A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-8A1.5 1.5 0 0 0 14.5 3H11v-.5A1.5 1.5 0 0 0 9.5 1h-3zm0 1h3a.5.5 0 0 1 .5.5V3H6v-.5a.5.5 0 0 1 .5-.5zm1.886 6.914L15 7.151V12.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V7.15l6.614 1.764a1.5 1.5 0 0 0 .772 0zM1.5 4h13a.5.5 0 0 1 .5.5v1.616L8.129 7.948a.5.5 0 0 1-.258 0L1 6.116V4.5a.5.5 0 0 1 .5-.5z"/>
            </svg>
            <i class="bi bi-briefcase"></i>
        </div>
    </div>
</div>

This is how it looks like currently:

Current design

This is how I want it to look like:

The design in question

Solution

  • Probably a few ways to do this. I think your custom styling may be affecting it due to font sizes maybe. I replaced the "container" with "p-1" and added some inline font sizes...

    <div class="row">
    <div class="col-1 d-flex justify-content-center align-items-center">
        <div class="p-1 border border-primary rounded-circle" style="font-size: 0;">
            <svg xmlns="http://www.w3.org/2000/svg" style="font-size: 1.4rem;" width="32" height="32" fill="currentColor" class="bi bi-briefcase" viewBox="0 0 16 16">
            <path d="M6.5 1A1.5 1.5 0 0 0 5 2.5V3H1.5A1.5 1.5 0 0 0 0 4.5v8A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-8A1.5 1.5 0 0 0 14.5 3H11v-.5A1.5 1.5 0 0 0 9.5 1h-3zm0 1h3a.5.5 0 0 1 .5.5V3H6v-.5a.5.5 0 0 1 .5-.5zm1.886 6.914L15 7.151V12.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V7.15l6.614 1.764a1.5 1.5 0 0 0 .772 0zM1.5 4h13a.5.5 0 0 1 .5.5v1.616L8.129 7.948a.5.5 0 0 1-.258 0L1 6.116V4.5a.5.5 0 0 1 .5-.5z"></path>
            </svg>
            <i class="bi bi-briefcase"></i>
        </div>
    </div>
</div>