<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技巧的组合来实现这一点。首先，它为<input>元素使用背景图像。然后，为了将光标移过去，它使用左填充。

换句话说，它们有这两条CSS规则:

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

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

.inp-icon { 背景:url(https://i.imgur.com/kSROoEB.png)no-repeat 100%; background-size: 16 px; ｝ <input class="inp-icon" type="text">

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

.icon { padding-left: 25 px; 背景:url(“https://static.thenounproject.com/png/101791-200.png”)无重复左; background-size: 20 px; ｝ <input type="text" class="icon" value placeholder="Search">

或者从右到左的图标

.icon-rtl { padding-right: 25 px; 背景:url(“https://static.thenounproject.com/png/101791-200.png”)无重复权限; background-size: 20 px; ｝ <input type="text" class="icon-rtl" value placeholder="Search">

 <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中的background属性即可。

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

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