如何用bootstrap5制作头像？

Question

我正在使用Bootstrap 5，我想制作带有不同图标的头像（类似于字母头像）。所以，我需要有占位符，并且在该占位符中我需要添加图标。类似于代码：

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

但这不起作用。谁能帮我怎么做？

Answer 1

在 github 有一个名为 bootstrap-avatar 的 bootstrap 即用型样式表： 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%;
 }

Answer 3

这是我用来创建解决方案的documentation。

查看此代码段 - 我认为这正是您要实现的目标。

关键是设置固定宽度并添加 .rounded-circle class - 但您还必须在圆角 div.

内正确对齐图标

How to make avatar with bootstrap 5?