bootstrap icon content is not exactly in the middle

this is my website's settings button screen shot.

enter image description here

It may be visible, but it is slightly tilted to the upper right.

It is not a failure of vertical center alignment. I want this bootstrap icon gear-fill to actually be exactly in the middle of the div.

here is my html and css.

<span class="float-end btn-setting" on:click={modalMypage.show} on:keydown={modalMypage.show}><i class="bi bi-gear-fill"></i></span>

  .btn-setting {    width: 28px;    height: 28px;    border-radius: 50%;    position: relative;    background-color: white;    cursor: pointer;    transition: background-color .2s ease;  }  .btn-setting > i:before {    font-size: 18px;    color: #959FFF;    position: absolute;    inset: 0;    display: flex;    align-items: center;    justify-content: center;  }  .btn-setting:hover {    color: white;    background-color: transparent;    border: 1px solid white;  }  .btn-setting:hover > i::before {    color: white;  }

As you can see in the css, I've currently tried using display: flex, align-items-center, justify-content-center to center align it.It appears to be centered at first glance, but as mentioned before, it is slightly shifted to the top right.

Not only is it hard to see, but it's not that important. But now that I've been watching it for months, it's starting to get on my nerves.

Is there a good solution?