Html 如何在引导中的输入字段中添加图像图标？

我正在尝试使用引导在输入文本字段中添加图像图标。我在已成功实现的实例的输入标记中使用了字体awesome图标

您可以在下面的示例中看到：

上述示例的代码：

     <form  id="main-form" method="post" action="index.php">
        <div class="main-form">
                <div class="row" id="single">
                    <div class="col-md-9 shortfieldz">
                           <i class="zmdi zmdi-link"></i>

                             <input type="text" class="form-control main-input"  id='myInput' name="url" value="" placeholder="Paste a long url" /> 

                    </div>
                    <div class="col-md-3 shortbtnz">
                        <input class="btn btn-default btn-block main-button"  type="submit"   name="Shorten" value="Shorten">
                        <!--<button class="btn btn-primary btn-block main-button" id="copyurl" type="button">Copy</button>-->
                    </div>


                </div>
        </div>
      </form>

但现在我想用img标记替换字体Aweasome图标，以便为图像添加定制：

以下是我尝试过的：

   <form  id="main-form" method="post" action="index.php">
        <div class="main-form">
                <div class="row" id="single">
                    <div class="col-md-9 shortfieldz">
                            <img src="https://cdncontribute.geeksforgeeks.org/wp-content/uploads/GG-2.png" class="img-responsive" alt="Responsive image" width="30" height="24" /> 

                             <input type="text" class="form-control main-input"  id='myInput' name="url" value="" placeholder="Paste a long url" /> 

                    </div>
                    <div class="col-md-3 shortbtnz">
                        <input class="btn btn-default btn-block main-button"  type="submit"   name="Shorten" value="Shorten">
                        <!--<button class="btn btn-primary btn-block main-button" id="copyurl" type="button">Copy</button>-->
                    </div>


                </div>
        </div>
      </form>

输出：

如需参考，您可以看到：

---

我正在寻找解决方案，特别是在引导。任何建议或指示均已通知

使用引导的输入组。然后将图像添加到span元素中。

---

工作代码笔

使用引导程序的输入组。然后将图像添加到span元素中。

---

工作代码笔

您添加的链接向您展示了如何在查看检查器时准确地执行此操作

shortfieldz类的位置设置为相对。这告诉它相对于它的边界定位它的子对象

#main-form .main-form .shortfieldz {
    padding-right: 0px;
    position: relative; <--
}

#主窗体。主窗体。短字段z{
右边填充：0px；
position:relative；您添加的链接向您展示了如何在查看检查器的情况下准确地执行此操作

shortfieldz类的position设置为relative。这告诉它相对于其边界定位其子类

#main-form .main-form .shortfieldz {
    padding-right: 0px;
    position: relative; <--
}

#主窗体。主窗体。短字段z{
右边填充：0px；
职位：相对的；谢谢你的回答，但这不是我要找的，而是给出一个想法。谢谢你的回答，但这不是我要找的，而是给出一个想法。非常感谢你突出显示CSS属性。非常感谢你突出显示CSS属性。这很有帮助。这很有帮助。
#main-form .main-form .shortfieldz .zmdi-link {
    position: absolute; <---
    font-size: 28px;
    top: 15px; <---
    left: 25px; <---
    color: #8c8c8c;
    pointer-events: none;
}

#main-form .main-form .main-input {
    padding: 0px 55px; <----
    border-width: 0;
    font-size: 19px;
    font-family: roboto;
    background: #f2f2f2;
    height: 55px;
    color: #151720;
    border-radius: 29px 0px 0px 29px;
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
}