@syncfusion/ej2-layouts/styles/avatar/bootstrap5.css

A package of Essential JS 2 layout pure CSS components such as card and avatar. The card is used as small container to show content in specific structure, whereas the avatars are icons, initials or figures representing particular person.

.e-avatar {
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #dee2e6;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 2px;
  color: #6c757d;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 14px;
  font-weight: 500;
  height: 40px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
  position: relative;
  width: 40px;
  line-height: 22px;
}
.e-avatar img {
  height: 100%;
  width: auto;
}
.e-avatar.e-avatar-circle {
  border-radius: 50%;
}
.e-avatar.e-avatar-circle.e-avatar-large, .e-avatar.e-avatar-circle.e-avatar-xlarge {
  border-radius: 50%;
}
.e-avatar.e-avatar-xsmall {
  font-size: 10px;
  height: 24px;
  width: 24px;
  line-height: 16px;
}
.e-avatar.e-avatar-small {
  font-size: 12px;
  height: 32px;
  width: 32px;
  line-height: 18px;
}
.e-avatar.e-avatar-large {
  font-size: 18px;
  height: 48px;
  width: 48px;
  line-height: 28px;
  border-radius: 4px;
}
.e-avatar.e-avatar-xlarge {
  font-size: 20px;
  height: 56px;
  width: 56px;
  line-height: 28px;
  border-radius: 4px;
}