CSS: добавьте изображение, чтобы увидеть статус онлайн / оффлайн

Question

Как я могу добавить к существующему изображению значок, чтобы увидеть статус онлайн / офлайн? Пожалуйста, посмотрите здесь пример. В правом углу есть серая точка ... Как я могу это сделать?

Большое спасибо

Answer 1

Поместите значок внутри элемента div, который будет содержать значок и элемент состояния, например

.icon-container {
  width: 50px;
  height: 50px;
  position: relative;
}

img {
  height: 100%;
  width: 100%;
  border-radius: 50%;
}

.status-circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: grey;
  border: 2px solid white;
  bottom: 0;
  right: 0;
  position: absolute;
}

<div class='icon-container'>
  <img src="https://cdn2.iconfinder.com/data/icons/flatfaces-everyday-people-square/128/beard_male_man_face_avatar-512.png" />
  <div class='status-circle'>
  </div>
</div>