Using FontAwesome yarn package manager

1. console: #

yarn add @fortawesome/fontawesome-free

2. javascript/packs/application.js: #

import "@fortawesome/fontawesome-free/css/all"

3. Check if it works: #

Add couple of icons in any .html.erb (view) file:

<i class="far fa-address-book"></i>
<i class="fab fa-github"></i>

Tips and tricks #

  • Use smth like fa-3x for font size.
  • Use fa-spin to make any icon spin. Animating Icons
  • Use it in a link with a block
    <%= link_to root_path do %>
    <i class="far fa-gem fa-spin fa-3x"></i>
    Home
    <% end %>
    

That’s it!😊


Relevant links: #