I'm currently attempting to insert an SVG into the lower right corner of an image within a bootstrap card. I experimented with a solution similar to this one: picture on the bottom right cornor of image, but when I apply CSS styles for the icon, my SVG vanishes completely. The full SVG I want to use can be found at this link:
With the current code, the cards are displayed like this:
https://i.sstatic.net/mUOtf.png I envision having the SVG positioned in the bottom right corner of the all-green image, as shown in the second picture.
.image{
height:100%;
position:relative;
background-color:green;
background-size: cover;
background-image: url(https://communityloaves.org/wp-content/uploads/2021/05/Avatar-2-450x450.jpg);
}
.image .icon {
position:absolute;
bottom:0px;
right:0px;
}
p.dash-intro.nav-btns {
padding-top: 3rem;
}
.col-md-4.padding-1 {
padding-left: 5px;
padding-right: 5px;
}
.ann-text {
margin-bottom: 0px !important;
}
.ann-img {
max-height: 40rem;
}
.dash-intro {
color: black;
font-size: 18px;
margin-top: 35px;
}
.member-img {
max-height: 7rem;
margin-bottom: 6px;
padding-left: 15px;
}
p.card-text {
font-size: 11px;
padding: 9px 15px 9px 0px;
}
.special {
color: black;
font-size: 19px;
font-weight: bold;
}
.card-header {
padding: 0.75rem 1.25rem;
margin-bottom: 0;
background-color: #D4E1D4;
border-bottom: 1px solid rgba(0,0,0,0.125);
}
.hide {
display: none;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2c0cdcdd6d1d6d0c3d2e2968c928c92">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
<br>
<hr>
<div class="row mt-3">
<div class="col-md-12">
<h4 class="font-weight-bold mb-3" id="members">Hub Members</h4>
</div>
</div>
<div class="row">
<div class="col-md-4 padding-1">
<div class="card border-success mb-5">
<div class="row g-2">
<div class="col-md-5 col-12 text-center padding-0">
<div class="image">
<div class="icon"><svg goes here. I didnt inlcude the full svg because it was too long> </div>
</div>
</div>
<div class="col-md-7 col-12 padding-0">
<p class="card-text">
<span class="font-weight-bold">Jane D <br></span>
<span class="font-weight-bold">Member Since: </span> Apr 13, 2022 <br>
<span class="font-weight-bold">First Donation: </span> Feb 27, 2022 <br>
<span class="email-text"><span class="font-weight-bold"><i class="fa fa-envelope"></i></span> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3e545f505b5a515b7e59535f5752105d5153">[email protected]</a></span>
<br><span class="font-weight-bold"><i class="fa fa-phone"></i></span> 555 555 555 (cell) <br><span class="font-weight-bold">Loaves to date: </span> 5
</p>
</div>
</div>
</div>
</div>
<!-- other card divs go here -->
</div>
</div>