Here’s a quick tutorial on how to add Font Awesome icons to your Ruby on Rails forms. To begin we will add Bootstrap and the Font Awesome gem to our rails application.

Gemfile


gem 'bootstrap-sass', '~> 3.3.6'
gem 'font-awesome-sass', '~> 4.7.0'
bundle install

touch app/assets/stylesheets/custom.scss



Application.js


//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks



Application.css


 *= require_tree .
 *= require_self


Custom.scss


@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";


// Bootstrap styles

$focus_background: #fff;
$focus_border: #555555; 

%focus {
    background-color: $focus_background;
    border: 1px solid $focus_border; 
}

.contact .form-control {
    display: block;
    width: 60%;
    height: 46px;
    padding: 6px 16px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #666;
    background: #f9f9f9;
    background-image: none;
    border: 1px solid #eee;
    border-radius: 2px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.contact .form-control:focus {
    @extend %focus; 
}

.contact textarea.form-control:focus {
    @extend %focus; 
}

.contact textarea.form-control {
    height: auto;
    width: 90%; 
    padding-top: 9px;
    padding-left: 45px;

}

.contact button.btn.btn-danger.btn-lg {
    text-align: right;
    min-width: 116px;
    font-size: 14px; 
    border-radius: 0px;
    background-color: #000;
    border-color: #000;
    &:hover {background-color: #b80a09; border-color: #b80a09; }
}

// Font Awesome

.contact .form-icons { 
   position: relative; 
   	input { text-indent: 30px; }
 	 .fa-user, .fa-paper-plane, .fa-phone {
	  position: absolute;
	  top: 16.5px;
	  left: 20px;
	  font-size: 15px;
	  color: grey; }
	   .fa-comments {
	   position: absolute;
	   top: 12px;
	   left: 20px;
	   font-size: 15px; 
	   color: grey; }
	    .fa-sign-in {
	    position: absolute;
	    top: 12px;
	    left: 16px;
	    font-size: 18px;
            color: white; }
}


Form partial for contact


<%= form_for(contact, :html => { class: "contact"}) do |f| %>
  <% if contact.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(contact.errors.count, "error") %> prohibited this contact from being saved:</h2>

      <ul>
      <% contact.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="form-group form-icons ">
    <span class="fa fa-user"></span>
    <%= f.text_field :first_name, class: "form-control", placeholder: "First Name*" %>
  </div>

  <div class="form-group form-icons">
    <span class="fa fa-user"></span>
    <%= f.text_field :last_name, class: "form-control", placeholder: "Last Name*"  %>
  </div>

  <div class="form-group form-icons">
    <span class="fa fa-paper-plane"></span>
    <%= f.email_field :email, class: "form-control", placeholder: "Your Email*" %>
  </div>

  <div class="form-group form-icons">
    <span class="fa fa-phone"></span>
    <%= f.text_field :phone, class: "form-control", placeholder: "Telephone" %>
  </div>

  <div class="form-group form-icons">
    <span class="fa fa-comments"></span>
    <%= f.text_area :body, class: "form-control", placeholder: "Your Message*", rows: 10  %>
  </div>

  <div class="form-group form-icons">
       <span class="fa fa-sign-in"></span>
      <%= f.button "SUBMIT", class: "btn btn-danger btn-lg", data: {disable_with: "<i class='fa fa-spinner fa-spin'></i>  Just a moment..." } %>
  </div>
<% end %>



And here is the basic form. More css styles can now be applied to make it look prettier. Thanks for checking out this tutorial, if you have any questions, please feel free to add a comment.

Bootstrap and Font Awesome form icons example