在输入框中将图像用作图标

Question

我为此尝试了不同的方法，但是没有一种方法对我有用，所以我问这个问题。

我有一张图片

我确实有以下表格

<div className="login-form">
  <form className="form-horizontal" id="loginForm">
    <div className="form-group" id="username-div">
      <input type="email" className="form-control usertext" id="username" placeholder="Email" />
    </div>
</div>
</div>

我也尝试使用绝对位置。但不起作用。

那么，如何解决此问题？

任何提示或帮助都会有所帮助。

Answer 1

有几种方法可以实现此目的，一种是使用绝对定位并将图标放在输入中，但我更喜欢这种方式：

.custom-input {
  background-color: white;
  border: 2px solid #ededed;
  padding: 6px;
  width: 215px;
  border-radius: 3px;
}

.custom-input>* {
  vertical-align: middle;
}

.custom-input img {
  width: 25px;
  height: 25px;
  display: inline-block;
}

.custom-input input {
  border: none;
  height: 40px;
  display: inline-block;
  outline: none;
  margin-left: 6px;
}

<div class="custom-input">
  <img src="https://i.stack.imgur.com/KNLAq.png" alt="user-icon" />
  <input type="text" placeholder="username" />
</div>

但是，请注意，这不是推荐的方法，在这种情况下最好使用字体图标。在这种情况下，已经有许多精美优美的字体图标。

Answer 2

您可以设置输入元素的背景图像以使用您的图像，然后使用填充来调整光标/占位符位置，这是示例CSS：

    input {  
     background-image:url(https://i.stack.imgur.com/KNLAq.png);
     background-repeat: no-repeat;
     background-size: contain;
     padding-left:20px;
    }

Answer 3

您可以将fontawesome库用于此用途：

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<input type="text" placeholder="&#xf007; Username" style="font-family:Arial, FontAwesome" />

Answer 4

您可以在占位符中使用Font awesome图标，并使用以下代码将font awesome cdn链接到您的页面

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

然后使用其代码值（CSS内容值）添加超棒的字体图标

<input type="text" name="text" placeholder="&#xf007; " style="font-family:Arial, FontAwesome">

并将font-family设置为FontAwesome