I am attempting to display an image inside a customized circular list item. Specifically, I want to display a success tick image within that list item. Here is the CSS I am using:
span.round-tabs {
width: 50px;
height: 50px;
line-height: 50px;
display: inline-block;
border-radius: 100px;
background: white;
z-index: 2;
position: absolute;
left: 0;
text-align: center;
font-size: 25px;
}
li.success span.round-tabs.one {
background-image: url('img/if_Tick_Mark_Dark_1398912.png');
}
<li class="success">
<a href="#" aria-controls="home" id="DivPatientDetails" name="PatientDetails" >
<span class="round-tabs one">
<i class="icon icon-profile-male"></i>01
<h4>Patient's Details</h4>
</span>
</a>
</li>However, the result I am getting is different from what I expected. Instead of the correct image, I am seeing this:
https://i.sstatic.net/h47PQ.png
But I actually wanted it to look like this:
https://i.sstatic.net/JFvGy.png
What could be causing this discrepancy?