Introduction

Font Awesome provides a nice, scalable icons that you can use in your application. As of version 4.2 Font Awesome had almost 500 icons available completely free of charge. Font Awesome manages this by making each icon part of a font so that it can be scaled and customized as needed. In this article, we will show you how to utilize Font Awesome in your Rails Application. Let's get started.

Rails Application Setup

In order to utilize Font Awesome in your Rails application, add the font-awesome-sass gem to your Gemfile.

Gemfile:

gem 'font-awesome-sass', '~> 4.2.0'

Now let's run a bundle install to install the gem.

Terminal Commands:

bundle install

Great, now let's create a controller called homes with an action called show that we will use to try out Font Awesome. Run the commands listed below to create this now.

Terminal Commands:

rails g controller homes show

Now let's modify our routes file to properly set up the routes and set the site root to our newly created controller. Modify your routes file so that it looks like the code listed below.

config/routes.rb:

Rails.application.routes.draw do
  resource :homes, only: [:show]
  root to: "homes#show"
end

Great, now we need to create a new file called font-config.scss inside our app/assets/stylesheets folder. Do this and add in the code listed below.

app/assets/stylesheets/font-config.scss:

@import 'font-awesome-sprockets';
@import 'font-awesome';

Excellent! We are now ready to begin utilizing font-awesome. First, let's start with the basics. Add the following line to your show view for your homes controller.

app/views/homes/show.html.erb:

<i class="fa fa-github"></i>

If you start a rails server and navigate to http://localhost:3000 you will notice a small GitHub icon. Let's make it bigger. modify your show view so that it looks like the code listed below:

app/views/homes/show.html.erb:

<i class="fa fa-github big"></i>

Now open up your font-config.scss file again and modify it so that it looks like the code listed below.

app/assets/stylesheets/font-config.scss:

@import 'font-awesome-sprockets';
@import 'font-awesome';

.fa.big {
  font-size: 500px;
}

If you refresh your page, you'll see that the GitHub icon is now much bigger. Now let's inverse the colors. Open up your show view again and modify it so that it looks like the code listed below.

app/views/homes/show.html.erb:

<i class="fa fa-github big"></i>
<i class="fa fa-github big inverse"></i>

Once again, modify your font-config.scss so that it looks like the code listed below.

app/assets/stylesheets/font-config.scss:

@import 'font-awesome-sprockets';
@import 'font-awesome';

.fa.big {
  font-size: 500px;
}

.inverse {
  color: white;
  background: black;
}

Great, if we refresh the page, now we will see the original github icon and the new inversed one. We can also make the icons other colors, for example, let's make it red. Modify the show view one more time and add in the code listed below.

app/views/homes/show.html.erb:

<i class="fa fa-github big"></i>
<i class="fa fa-github big inverse"></i>
<i class="fa fa-github big red"></i>

Finally, modify your font-config.scss file to look like the code listed below.

app/assets/stylesheets/font-config.scss:

@import 'font-awesome-sprockets';
@import 'font-awesome';

.fa.big {
  font-size: 500px;
}

.inverse {
  color: white;
  background: black;
}

.red {
  color: red;
}

If you refresh the page, you'll see the new red GitHub icon alongside your other icons. A full list of icons can be found here. That's it! Thanks for reading!

Resources