Struggling with alignment in Bootstrap 5, facing two issues:
1- How to align my icon with the left border of the card body?
2- Increasing the icon size affects the vertical alignment of my card item (see image below)
https://i.sstatic.net/dR7DD.png
Trying to vertically align the arrow and have it stick to the left border even when text length changes.
<div class="container-fluid">
<div class="row ">
<div class="col-lg-4 col-card-pricing">
<!-- 1 month -->
<div class="card my-auto card-pricing">
<div class="card-body border-bottom-0">
<i class="fas fa-dollar-sign fa-4x pricing-tag"></i>
<h5 class="card-title"> Monthly </h5>
<h5 class="card-title">$ 1.00 </h5>
</div>
<ul class="list-group list-group-flush border-bottom-0 border-top-0">
<li class="list-group-item border-bottom-0 pricing-item"> <i class="fas fa-arrow-right fa-1x arrow-item"></i>Choose one game </li>
<li class="list-group-item border-bottom-0 pricing-item"> <i class="fas fa-arrow-right fa-1x arrow-item"></i>Detailed statistics</li>
</ul>
<a href="#" class="btn btn-dark btn-lg princing-button">Subscribe</a>
</div>
</div>
</div>
.col-card-pricing {
padding: 3% 4%;
}
.card-pricing {
/* height: 500px; */
transition-duration: .3s;
border-radius: 5%;
margin: 3% 0;
}
.card-pricing:hover {
/* height: 500px; */
transform: scale(1.15);
border: 1px #F05454 solid;
}
/* .card-pricing:hover
.pricing-button {
background-color: #F05454 !important;
} */
.princing-button {
margin: 6% 15%;
margin-bottom: 10%;
}
.pricing-item {
font-size: 1.2Rem;
margin: 5%;
vertical-align: middle;
}
.arrow-item {
/* padding-right: 150px; */
/* text-align: left !important; */
}
.pricing-tag {
padding: 8% 0;
color: green;
}