Icon inside simple form

Question

I'm using simple_form_for in my rails app and I need to recreate something like this:

I currently am able to recreate the boxes itself and with placeholders but the icons dont seem to work for me.

I cannot find how I can add for example fontawesome icons inside the textfield itself.

Any help would be greatly appreciated.

Possible duplicate of [Font Awesome icon inside text input element](http://stackoverflow.com/questions/19285640/font-awesome-icon-inside-text-input-element) — Luís P. A., Oct 21 '15 at 14:36

score 0 · Accepted Answer · answered Oct 21 '15 at 20:58

You can use text-indent on the input: Here is the code

.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

1 Answers1