Add Font Awesome 5 to a Rails 6 App

Published: 2020-12-20

Intro

Font Awesome is a collection of great looking icons that we can use to spice up the look of our app.

Note
There is a free version and a paid version. In this post we will be utilizing the free version of Font Awesome.

Software

The following software versions were used in this post.

  • Rails - 6.0.3.4
  • Font Awesome (Free) - 5.15.1

Installation

Note
In a previous post I added the Bootstrap (5) CSS framework to a Rails 6 app. For context on the file placement of the Font Awesome package, you might want to check that post out first.

Firstly add the fontawesome-free package via yarn.

cmd
yarn add @fortawesome/fontawesome-free

Next, we import the Font Awesome package into our application.css file.

file
/* app/assets/stylesheets/application.css */

@import "@fortawesome/fontawesome-free";

Finally, we import the Font Awesome package into our application.js file.

file
// app/javascript/packs/application.js

import "@fortawesome/fontawesome-free/js/all";

Usage

To find icons search for them here Once you have an icon, add the HTML markup to a page.

file
<i class="fab fa-instagram"></i>

You can also change the size by adding extra size classes to the tag fa-2x in the below example.

file
<i class="fab fa-instagram fa-2x"></i>

Outro

That's it. Not alot to it. now, make like Bill and Ted and be excellent to each other.