Add Font Awesome 5 to a Rails 6 App

published: 20th of December 2020

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.