Is there a way to vertically center the font-awesome icon inside an input box using Bootstrap without setting margins, padding values, or adjusting the height of the input?
.inset-0 {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.inset-y-0 {
top: 0;
bottom: 0;
}
.left-0 {
left: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="385a57574c4b4c4a5948780c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex d-flex-grow form-group position-relative">
<div class="align-items-center justify-content-between lead pl-2 position-absolute">
<i class="fas fa-search"></i>
</div>
<input type="text" class="form-control pl-5" placeholder="Type to search" />
</div>