How to make avatar with bootstrap 5?

I am using Bootstrap 5 and I want to make avatar with different icons in it (simmilar as letter avatar). So, I need to have placeholder and inside that placeholder i need to add the icon. Something like the code:

<div width="30%" height="30%" class="bg-info rounded-circle">
<span>
{Icon here}
</span>
</div>

But this is not working. Can anyone help me how to do this?

Solution 1:

There is a ready-to-use stylesheet for bootstrap called bootstrap-avatar at github: bootstrap-avatar

The other way is using plain css to build it. It is quite easy by the way. Here is an example: Building avatars using css

Also, if you are using inline css, you have to wrap it into style like that:

<div style="width:30%;" class="bg-info rounded-circle">

Solution 2:

Here is the documentation I've used to create the solution.

Check out this snippet - I think this is exactly what you are trying to achieve.

Bootstrap Avatar with Icon

The key is to set a fixed width and add the .rounded-circle class - but you also have to properly align the icon within the rounded div.

This example is from a GitHub repository dedicated to Bootstrap Avatars.