如何在 Bootstrap 4 和 5 中添加图标到搜索输入？

使用 Icon Bootstrap 搜索输入

Bootstrap 在版本 4 中不再支持 Glyphicons，因此想要向搜索输入添加图标的用户必须找到替代方案方法。

Bootstrap 5 Beta（2021 年）更新）

<div class="input-group">
    <input class="form-control border-end-0 border rounded-pill" type="text" value="search"><p><strong>Bootstrap 4（原始解决方案）</strong></p>
<p>使用 Bootstrap 4 输入组元素：</p>
<pre class="brush:php;toolbar:false"><div class="input-group col-md-4">
    <input class="form-control py-2" type="search" value="search"><p> <strong>内部输入边框：</strong></p>
<pre class="brush:php;toolbar:false"><div class="input-group col-md-4">
    <input class="form-control py-2 border-right-0 border" type="search" value="search"><p><strong>无背景的输入组文本：</strong></p>
<pre class="brush:php;toolbar:false"><div class="input-group">
    <input class="form-control py-2 border-right-0 border" type="search" value="search"><p><strong>无装订线间距的网格（行>列） :</strong></p>
<pre class="brush:php;toolbar:false"><div class="row no-gutters">
    <div class="col">
        <input class="form-control border-secondary border-right-0 rounded-0" type="search" value="search"><p><strong>前置图标：</strong></p>
<pre class="brush:php;toolbar:false"><div class="input-group">
    <span class="input-group-prepend">
        <div class="input-group-text bg-transparent border-right-0">
            <i class="fa fa-search"></i>
        </div>
    </span>
    <input class="form-control py-2 border-left-0 border" type="search" value="..."><p><strong>验证图标：</strong></p>
<pre class="brush:php;toolbar:false"><div class="input-group is-invalid">
    <input class="form-control" type="search" value="">
</div>