头像

头像是用图片、图标或者文字的形式展示用户及具有特殊标识的其他对象。

基本使用

为元素并添加类 .avatar，然后将作为图像的图片、文字或图标放置在此元素内。

Z

提示

当使用文字作为头像时，建议文字数目不要超过 2 个，如果需要显示更多文字进行个性化排版，推荐使用 JavaScript 增强的头像插件。

头像形状

搭配 CSS 工具类 rounded-* 为头像应用不同的圆角样式。

外观类型

当使用文字或图标作为头像时，配合使用CSS 工具类来实现不同头像的外观。下面展示各种工具类的外观效果。

Z

Z

Z

Z

尺寸

除了默认大小，还提供了额外的 4 种预设尺寸，通过 size-* 来为头像设置尺寸。

X

S

Z

LG

XL

CSS 类

头像提供了如下 CSS 类：

类	类型	作用
avatar	实体类	元素作为头像组件
size-xs	工具类	头像使用超小号尺寸
size-sm	工具类	头像使用小号尺寸
size-lg	工具类	头像使用大号尺寸
size-xl	工具类	头像使用超大号尺寸

CSS 变量

头像提供了如下 CSS 变量，可进行全局修改：

CSS 变量名	作用
--avatar-radius	头像默认圆角大小
--avatar-bg	头像默认背景颜色

参考

• 头像组