Add Font Awesome 5 to a Rails 6 App
Published: 20th of December 2020
Font Awesome is a collection of great looking icons that we can use to spice up the look of our app.
There is a free version and a paid version. In this post we will be utilizing the free version of Font Awesome.
The following software versions were used in this post.
- Rails - 188.8.131.52
- Font Awesome (Free) - 5.15.1
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.
yarn add @fortawesome/fontawesome-free
Next, we import the Font Awesome package into our application.css file.
/* app/assets/stylesheets/application.css */ @import "@fortawesome/fontawesome-free";
Finally, we import the Font Awesome package into our application.js file.
To find icons search for them here. Once you have an icon, add the HTML markup to a page.
<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.
<i class="fab fa-instagram fa-2x"></i>
That's it. Not alot to it. now, make like Bill and Ted and be excellent to each other.