picture on the bottom right cornor of image - html

Question

I am trying to get a little icon on the right bottom corner of the image. So the image gets a little icon on the bottom right cornor of the picture.
<div>
<div class="tab-pane" id="activity">
<div class="post clearfix">
<?php
$suppport = $app->get_supportpage();
foreach($suppport as $support){
?>
<div class="user-block" style="margin-top:5px;">
<img style="margin-top:3%;"class="img-circle" src="/assets/images/profielfotos/64hond.jpg">
<span class="username"><?php echo $support['van_naam'] ?></span>
<span class="description">
<div style=" white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px;">
<b><?php echo $support['bericht']; ?></b><br>
31 minuten geleden<p style="float:right;"><?php echo $support['type']; ?></p></div>
</span>
</div><hr>
<?php } ?>
</div>
</div>
</div>

Answer 1

use div instead of img tags, and use a background-image:url('path') for your images and do a position:absolute on your icon
.image{
width:100px;
height:100px;
position:relative;
background-color:lime;
background-image: url(//www.w3schools.com/Html/pic_trulli.jpg);
background-size: cover;
}
.image .icon i{
position:absolute;
bottom:0px;
right:0px;
font-size: 33px;
color: blue;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="image">
<div class="icon"><i class="fa fa-car"></i></div>
</div>