Skip to content
Font Awesome Docs Version 6

Ruby on Rails

Font Awesome has an official Ruby on Rails gem for free and pro icons.

How to Install

Section titled “How to Install”

There are different ways to install the free version vs. the pro version.

Add the Font Awesome Ruby gem to your Gemfile:

Terminal window
source "https://token:TOKEN@dl.fontawesome.com/basic/fontawesome-pro/ruby/" do
  gem "font-awesome-pro-sass", "VERSION"
end

Time to Bundle

Section titled “Time to Bundle”

In the terminal and in your project folder:

Terminal window
 bundle install

Import Font Awesome

Section titled “Import Font Awesome”

Add the following to the app/assets/stylesheets/application.css.scss file:

Terminal window
@import "font-awesome-pro";

Style Time

Section titled “Style Time”

Next, you need to choose which style of icons you want to use in your project. You may import any number of the styles. Font Awesome has the following styles:

Terminal window
@import "font-awesome-pro/brands";
@import "font-awesome-pro/solid";
@import "font-awesome-pro/regular";
@import "font-awesome-pro/light";
@import "font-awesome-pro/thin";
@import "font-awesome-pro/duotone";
@import "font-awesome-pro/duotone-regular";
@import "font-awesome-pro/duotone-light";
@import "font-awesome-pro/duotone-thin";
@import "font-awesome-pro/sharp-solid";
@import "font-awesome-pro/sharp-regular";
@import "font-awesome-pro/sharp-light";
@import "font-awesome-pro/sharp-thin";
@import "font-awesome-pro/sharp-duotone-solid";
@import "font-awesome-pro/sharp-duotone-regular";
@import "font-awesome-pro/sharp-duotone-light";
@import "font-awesome-pro/sharp-duotone-thin";

Add Those Icons

Section titled “Add Those Icons”

It’s time!

<!-- Classic icons style example; works for solid, regular, light, and thin. -->
<i class="fa-solid fa-alien"></i>


<!-- Sharp icons style example; works for solid, regular, light, and thin. -->
<i class="fa-sharp fa-solid fa-alien"></i>


<!-- Duotone icons style example; works for solid, regular, light, and thin. -->
<i class="fa-duotone fa-solid fa-alien"></i>


<!-- Sharp Duotone icons style example; works for solid, regular, light, and thin. -->
<i class="fa-sharp-duotone fa-solid fa-alien"></i>

Feeling your oats, add icons using the Rails helper function:

# Classic icons style example; works for solid, regular, light, and thin.
<%= icon('fa-solid', 'alien')%>


# Sharp icons style example; works for solid, regular, light, and thin
<%= icon('fa-solid fa-sharp', 'alien')%>


# Duotone Solid icons style example; works for Duotone solid only.
<%= icon('fa-duotone', 'alien')%>


# Other Duotone icons style example; works for regular, light, and thin.
<%= icon('fa-regular fa-duotone', 'alien')%>


# Sharp Duotone icons style example; works for solid, regular, light, and thin
<%= icon('fa-solid fa-sharp-duotone', 'alien')%>

Alright Stop, Animate, and Listen

Section titled “Alright Stop, Animate, and Listen”

Want to animate or change the size of your icons? Here’s how:

<i class="fa-thin fa-user-secret fa-7x fa-beat"></i>

Or animate with the Rails helper function:

<%= icon('fa-thin', 'alien', class:"fa-7x fa-bounce")%>
<%= icon('fa-light', 'font-awesome', 'Font Awesome', id: 'my-icon', class: 'fa-shake')%>
<%= icon('fad', 'font-awesome', 'Font Awesome', id: 'my-icon', class: 'fa-beat')%>

Note: the icon helper can take a hash of options that will be passed to the content_tag helper

Other Ruby Projects

Section titled “Other Ruby Projects”

The path.scss file contains a function for using the font-path function if found. If the function is not found it will use the $fa-font-path variable for the path to the webfont files. You can override this variable to where your framework will store the webfonts files.