I have a Font Awesome search text box in grid table header header, but unfortunately below code making control and icon in separate lines. How can I solve this?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<table class="table table-bordered table-responsive-md table-striped text-left">
<thead>
<tr>
<th>
<input class="form-control " type="text" placeholder="Search" class="fas fa-search" aria-label="Search">
<span class="input-group-addon">
<i class="fas fa-search" aria-hidden="true"></i>
</span>
</th>
</tr>
</thead>
</table>Per the docs, wrap the two elements in an input group and wrap the icon in an append div.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<table class="table table-bordered table-responsive-md table-striped text-left">
<thead>
<tr>
<th>
<div class="input-group">
<input class="form-control" type="text" placeholder="Search" class="fas fa-search" aria-label="Search">
<div class="input-group-append">
<span class="input-group-text">
<i class="fas fa-search" aria-hidden="true"></i>
</span>
</div>
</div>
</th>
</tr>
</thead>
</table>