[FIXED] How to make avatar with bootstrap 5?

Issue

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

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">

Answered By - pybugHTL

Answer Checked By - Katrina (PHPFixing Volunteer)