如何用bootstrap 5制作头像？

Question

我正在使用Bootstrap 5，我想用不同的图标制作头像(类似于字母头像)。所以，我需要有占位符，在占位符里面我需要添加图标。类似于下面的代码：

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

但这是行不通的。有没有人能教我怎么做？

Answer 1

在github上有一个现成的引导样式表，叫做bootstrap-avatar：bootstrap-avatar

另一种方法是使用纯css来构建它。顺便说一句，这很容易。下面是一个示例：Building avatars using css

另外，如果你使用的是内联css，你必须把它包装成这样的样式：

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

Answer 2

对我来说，这是我通常使用它的方式：

步骤1)添加HTML：

<img src="avatar.png" alt="Avatar" class="avatar">

步骤2)添加CSS:设置匹配的高度和宽度，使其看起来很好，并使用border-radius属性为图像添加圆角。50%会使图像变成圆形：

 .avatar {
    vertical-align: middle;
    width: 50px;
    height: 50px;
    border-radius: 50%;
 }