I am facing an issue while trying to create a circular shape around a font awesome icon. Whenever I apply position: absolute, the circle distorts and turns into an ellipse.
A similar problem occurs when I try using display: block.
https://i.sstatic.net/FYBB1.png
For reference, here is an image of what my desired outcome looks like -
https://i.sstatic.net/YsFZp.jpg
<slide class="assessment-score">
<div class="score-heading pass">
<span id="score-salutation" class="light">CONGRATULATIONS</span>
<span id="score-message">YOU HAVE PASSED</span>
<i class="fa fa-check-circle"></i>
</div>
<div class="score-results">
<span id="score">You have scored 92%</span>
<button>DOWNLOAD YOUR CERTIFICATE</button>
<a id="assessment-close"><i class="fa fa-times-circle-o"></i> CLOSE ASSESSMENT</a>
</div>
</slide>
The CSS code snippet:
slide.assessment-score .score-heading{
height: 33%;
background-color: #a8db66;
border-radius: 5px 5px 0 0;
color: #ffffff;
position: relative;
}
slide.assessment-score .score-heading i{
position: absolute;
bottom: 0;
right: 0;
left: 0;
font-size: 6em;
margin-bottom: -30px;
border-radius: 50%;
padding: 1rem
background-color: black;
}