我正在使用Bootstrap 5，我想在其中使用不同的图标制作头像（类似于字母头像）。因此，我需要有占位符，并在占位符内添加图标。类似代码：
<div width="30%" height="30%" class="bg-info rounded-circle"> <span> {Icon here} </span> </div>
但这不起作用，谁能帮我怎么做？
ttvkxqim1#
在github上有一个现成的bootstrap样式表，叫做bootstrap-avatar：bootstrap-avatar另一种方法是使用普通的css来构建它。顺便说一句，这很容易。下面是一个例子：Building avatars using css同样，如果你使用内联css，你必须把它 Package 成如下样式：
<div style="width:30%;" class="bg-info rounded-circle">
hzbexzde2#
下面是我用来创建解决方案的documentation。看看这个片段-我认为这正是你试图实现的。Bootstrap Avatar with Icon
关键是设置一个固定的宽度并添加.rounded-circle类--但您还必须在圆角div内正确对齐图标。此示例摘自**GitHub repository dedicated to Bootstrap Avatars**。
.rounded-circle
taor4pac3#
对我来说，这是我通常使用它的方式：步骤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%; }
a64a0gku4#
您可以使用构建在bootstrap 5.2之上的fastbootstrap包。https://fastbootstrap.com/components/avatar/虚拟形象堆叠https://fastbootstrap.com/components/avatar-group/
4条答案
按热度按时间ttvkxqim1#
在github上有一个现成的bootstrap样式表，叫做bootstrap-avatar：bootstrap-avatar
另一种方法是使用普通的css来构建它。顺便说一句，这很容易。下面是一个例子：Building avatars using css
同样，如果你使用内联css，你必须把它 Package 成如下样式：
hzbexzde2#
下面是我用来创建解决方案的documentation。
看看这个片段-我认为这正是你试图实现的。
Bootstrap Avatar with Icon
关键是设置一个固定的宽度并添加
.rounded-circle类--但您还必须在圆角div内正确对齐图标。此示例摘自**GitHub repository dedicated to Bootstrap Avatars**。
taor4pac3#
对我来说，这是我通常使用它的方式：
步骤1）添加HTML：
步骤2）添加CSS：设置一个看起来不错的匹配高度和宽度，并使用border-radius属性为图像添加圆角。50%将使图像成为圆形：
a64a0gku4#
您可以使用构建在bootstrap 5.2之上的fastbootstrap包。
https://fastbootstrap.com/components/avatar/
虚拟形象堆叠
https://fastbootstrap.com/components/avatar-group/