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.
The following software versions were used in this post.
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.