Setting padding, background color and radius on Bootstrap Icon

Question

Using Bootstrap Icons and Bootstrap 5. I had been trying to set a padding, background color, and radius circle on a Bootstrap Icon, so that there is a perfect circle background behind the icon. I tried using <i class="bi-globe-americas text-white p-3 bg-primary rounded-circle "></i> but I noticed several issues:

1. The background circle isn't perfect round circle, but it's like oval
2. Since <i> is an inline element, I had to do something else so that it doesn't wrap around, but setting display: inline-block; would cause this:

or display: block would cause this:

The final result I would like is something like this:

Answer 1

Bootstrap's ratio classes may do what you need. You can set your container div to have an aspect ratio of 1:1, and then your icon should remain a circle.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="text-white p-3" style="width: 25%; background-color: #f8682c; border-radius:50%;">
<div class="bi-globe-americas rounded-circle ratio ratio-1x1" style="background-color:#fca384">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="white">
  <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM2.04 4.326c.325 1.329 2.532 2.54 3.717 3.19.48.263.793.434.743.484-.08.08-.162.158-.242.234-.416.396-.787.749-.758 1.266.035.634.618.824 1.214 1.017.577.188 1.168.38 1.286.983.082.417-.075.988-.22 1.52-.215.782-.406 1.48.22 1.48 1.5-.5 3.798-3.186 4-5 .138-1.243-2-2-3.5-2.5-.478-.16-.755.081-.99.284-.172.15-.322.279-.51.216-.445-.148-2.5-2-1.5-2.5.78-.39.952-.171 1.227.182.078.099.163.208.273.318.609.304.662-.132.723-.633.039-.322.081-.671.277-.867.434-.434 1.265-.791 2.028-1.12.712-.306 1.365-.587 1.579-.88A7 7 0 1 1 2.04 4.327Z"/>
</svg>
</div>
</div>

Note: I embedded the SVG icon as the snippet tool wants either a JavaScript or CSS file.

Update: if you want the background container to be round as well, you can apply a radius to the container.