Introduction

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>
  

    

Summary

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

Tags

rails fontawesome