与字体图标一起使用

<input name="foo" type="text" placeholder="&#61447;">

OR

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

#foo::before
{
  font-family: 'FontAwesome';
  color:red;
  position: relative;
  left: -5px;
  content: "\f007";    
}

我不想改变我的输入文本的背景，也不会与我的SVG图标工作。

我所做的就是为图标添加负边距，这样它就会出现在输入框中

并在输入中添加相同的填充值，这样文本就不会出现在图标下面。

<div class="search-input-container">

  <input
    type="text"
    class="search-input"
    style="padding-right : 30px;"
  />

  <img 
    src="@/assets/search-icon.svg" 
    style="margin-left: -30px;"
   />

</div>

*内联风格是为了可读性考虑使用类

你可以试试这个: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>

您链接的站点使用了CSS技巧的组合来实现这一点。首先，它为<input>元素使用背景图像。然后，为了将光标移过去，它使用左填充。

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

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

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

.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">

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

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