Is there a way to design an input group that includes both a text field and an icon placed at the beginning of the text field? The code below demonstrates my attempted implementation, however, it appears that only the text field is visible without the accompanying icon. What could be causing the icon not to display?
<div class="input-group">
<div class="input-group-text">
<i class="fas fa-th-list"></i>
</div>
<input type="text" class="form-control" id="location" placeholder="Location">
</div>
Could someone provide guidance on how to successfully create an input group featuring an icon alongside a placeholder or input with an icon preceding the placeholder? Additionally, any insight as to what may be incorrect in the provided code would be greatly appreciated.