简单形式内的图标

Question

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

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

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

如有任何帮助，我们将不胜感激。

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>

简单形式内的图标

Icon inside simple form

css

ruby-on-rails

simple-form