简单表格内的图标

Question

我在我的 rails 应用程序中使用 simple_form_for，我需要重新创建类似这样的内容：

我目前能够重新创建框本身并使用占位符，但图标似乎不适合我。

我找不到如何在文本字段本身内添加例如 fontawesome 图标。

任何帮助将不胜感激。

Answer 1

您可以在输入上使用text-indent：这是代码

.input-group {
    position: relative;
    width: 50%;
}
input {
    text-indent: 20px;
    width: 100%;
}

i {
    position: absolute;
    right: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="input-group">
  <i class="fa fa-fw fa-user"></i>
  <input type="name" placeholder="Name">
</div>
<div class="input-group">
  <i class="fa fa-fw fa-envelope-o"></i>
  <input type="email" placeholder="Email">
</div>