Adding a Circle Border to Icons

 

To add circular borders around your icons, add the following CSS:

.bz-item svg {
  border: 1px solid #000;
  padding: 1px;
  border-radius: 100%;
  box-sizing: content-box;
  overflow: visible;
}

You can adjust the border property (for example, set it to 4px for a thicker line or 1px for a thinner line). To change the spacing between the border and the icon, update the padding value.

Transcript

So to have a circular border around your, uh, icons here. You're going to want to go to the same place where you added the, uh, the original CSS, um, in the, uh, the app wrapper of your , uh, page block.

Copy and paste the CSS I'm going to throw in this, uh, in this , to make the, uh, circle border with , Umm, thicker, update this border property here, um, currently it's at two pixels, so if you want to make it thicker, you can set it to like , four, or a thinner, so it's one, and then update via the padding. on to, uh, update the size of the circle. So if I want the circle to be really, really far away, I'm gonna make the padding bigger, uhm, or if I want the, uh, border to be really, really close to the icon. Come. Umm. I can, uh, set the panning to a smaller value.