时间戳

首页 > 解决方案 > 如何使用 bootstrap 5 制作头像？

html - 如何使用 bootstrap 5 制作头像？

问题描述

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

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

但这不起作用。谁能帮助我如何做到这一点？

标签： htmltwitter-bootstrapsassbootstrap-5avatar

解决方案

在 github 上有一个名为 bootstrap-avatar 的 bootstrap 即用型样式表： bootstrap-avatar

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

此外，如果您使用的是内联 css，则必须将其包装成如下样式：

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

推荐阅读