如何使用Bootstrap 5制作内置不同图标的自定义头像？

问题原因 #

• 你给<div>设置的width="30%"、height="30%"是仅对图片、画布等替换元素生效的原生属性，普通块级div不会识别该配置，导致容器没有实际尺寸
• 容器没有配置内容对齐规则，内部图标会出现错位，无法达到头像的居中展示效果

正确实现方案 #

用Bootstrap 5自带的工具类即可快速实现，无需复杂自定义CSS：

<!-- 图标头像容器 -->
<div class="bg-info rounded-circle d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
  <!-- 此处替换不同的图标类即可切换内置图标 -->
  <i class="bi bi-person text-white fs-4"></i>
</div>

使用前请确保已经正确引入Bootstrap Icons样式资源。

自定义调整说明 #

• 调整头像大小：修改容器style属性内的width、height数值即可，也可以自定义全局CSS类统一控制头像尺寸
• 调整图标样式：修改<i>标签的bi-*类切换不同图标，fs-*类调整图标尺寸，text-*类修改图标颜色
• 调整背景样式：修改容器的bg-*类即可更换头像背景色
• 若需要使用百分比尺寸，需要先给头像的父元素设置明确的固定尺寸，百分比才会正常生效

内容的提问来源于stack exchange，提问作者Kate