如何使用 bootstrap 5 制作头像？答案

【问题标题】：How to make avatar with bootstrap 5?如何使用 bootstrap 5 制作头像？
【发布时间】：2021-10-19 23:45:06
【问题描述】：

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

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

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

【问题讨论】：

你能举个例子吗？您还可以创建一个minimal reproducible example 并向我们展示您在尝试执行此操作时遇到的问题
@I_love_vegetables 我需要做一些像字母头像这样的事情，但是如果我使用引导程序<div width="30%" height="30%" class="bg-info rounded-circle"><span>NG<span /> <div /> - 背景颜色不会改变并且边框不会变圆。

【解决方案1】：

在 github 上有一个现成的 bootstrap 样式表，称为 bootstrap-avatar： bootstrap-avatar

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

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

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

【讨论】：

【解决方案2】：

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

第 1 步）添加 HTML：

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

第 2 步）添加 CSS：设置一个看起来不错的匹配高度和宽度，并使用边框半径属性为图像添加圆角。 50% 会使图像变成圆形：

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

【讨论】：

【解决方案3】：

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

查看这个 sn-p - 我认为这正是您想要实现的目标。

关键是设置固定宽度并添加.rounded-circle 类 - 但您还必须在圆形 div 内正确对齐图标。

【讨论】：