How can I add to an existing image an badge to see the online / offline status? Please see here an example. In the right corner there is a gray dot... How can I do this?
Many thanks
Put the icon inside a div that will hold the icon and the status element, like this
.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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With