将图标放入表单中的输入元素

 <label for="fileEdit">
    <i class="fa fa-cloud-upload">
    </i>
    <input id="fileEdit" class="hidden" type="file" name="addImg" ng-file-change="onImageChange( $files )" ng-multiple="false" accept="{{ contentType }}"/>
  </label>

例如，您可以使用带有隐藏输入（带有图标）的：：标签。

在开始时使用此CSS类作为输入，然后相应地自定义：

    
 .inp-icon{
background: url(https://i.imgur.com/kSROoEB.png)no-repeat 100%;
background-size: 16px;
 }

<input class="inp-icon" type="text">

只需在CSS中使用background属性即可。

<input id="foo" type="text" />

#foo
{
    background: url(/img/foo.png);
}

您可以尝试以下方法：Bootstrap-4 Beta
https://www.codeply.com/go/W25zyByhec

<div class="container">
            <form>
                <div class="row">
                    <div class="input-group mb-3 col-sm-6">
                      <input type="text" class="form-control border-right-0" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
                        <div class="input-group-prepend bg-white">
                            <span class="input-group-text border-left-0 rounded-right bg-white" id="basic-addon1"><i class="fas fa-search"></i></span>
                        </div>
                    </div>
                </div>
            </form>
        </div>

在输入中放置Icon的一种简单方法是使用position CSS属性，如下面的代码所示。注意：为了简化起见，我简化了代码。

1. 创建围绕输入和图标的容器。
2. 将容器位置设置为相对
3. 将图标设置为绝对位置。这将使图标相对于周围的容器定位。
4. 使用顶部，左侧，底部，右侧之一将图标放置在容器中。
5. 在输入中设置填充，以使文本不与图标重叠。

#input-container {
  position: relative;
}

#input-container > img {
  position: absolute;
  top: 12px;
  left: 15px;
}

#input-container > input {
  padding-left: 40px;
}

<div id="input-container">
  <img/>
  <input/>
</div>

没有背景图片的解决方案：

#input_container {
    position:relative;
    padding:0 0 0 20px;
    margin:0 20px;
    background:#ddd;
    direction: rtl;
    width: 200px;
}
#input {
    height:20px;
    margin:0;
    padding-right: 30px;
    width: 100%;
}
#input_img {
    position:absolute;
    bottom:2px;
    right:5px;
    width:24px;
    height:24px;
}

<div id="input_container">
    <input type="text" id="input" value>
    <img src="https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png" id="input_img">
</div>

您链接的网站使用CSS技巧的组合来实现这一目标。首先，它使用背景图片作为<input>元素。然后，为了将光标移到上方，它使用padding-left。

换句话说，它们具有以下两个CSS规则：

background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;

.icon{
background: url(1.jpg) no-repeat;
padding-left:25px;
}

将上述标记添加到CSS文件中，并使用指定的类。

我发现这是最好，最干净的解决方案。在元素上使用text-indentinput

CSS：

#icon{
background-image:url(../images/icons/dollar.png); 
background-repeat: no-repeat; 
background-position: 2px 3px;
}

HTML：

<input id="icon" style="text-indent:17px;" type="text" placeholder="Username" />

其他人发布的CSS解决方案是完成此任务的最佳方法。

如果那应该给您带来任何问题（请阅读IE6），则还可以在div中使用无边界输入。

<div style="border: 1px solid #DDD;">
    <img src="icon.png"/>
    <input style="border: none;"/>
</div>

并非“干净”，但应在较旧的浏览器上运行。