简单形式内的图标

Question

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

我目前能够使用占位符重新创建盒子，但这些图标似乎对我不起作用。

我找不到如何添加例如文本域内的fontawesome图标。

非常感谢任何帮助。

Answer 1

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

＆＃13;

＆＃13;

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

i {
    position: absolute;
    right: 0;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;