Иконка в простой форме

Question

Я использую simple_form_for в моих рельсах приложении, и мне нужно, чтобы воссоздать что-то вроде этого:

В настоящее время я нахожусь в состоянии воссоздать сам коробку и с заполнителями, но значки DonT похоже, работают на меня.

Я не могу найти, как я могу добавить, например, значки 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>