Como instalar font-awesome via webpack na sua aplicação rails 6.

O Rails 6 trás o webpack como o compilador padrão de Javascript! Pra quem não conhece, o webpack é uma gem que permite uma fácil integração do pré-processor de JavaScript e do bundler do Rails.

Abaixo eu coloquei um passo a passo simples de ser seguido onde você consegue utilizar tudo o que o font-awesome pode oferecer na sua aplicação.

Primeiro, instale o font-awesome via yarn:

yarn add @fortawesome/fontawesome-free

Depois, importe o font-awesome stylesheets e javascripts para dentro da sua aplicação. Acessando a pasta application.scss insira:

$fa-font-path: '@fortawesome/fontawesome-free/webfonts';
@import '@fortawesome/fontawesome-free/scss/fontawesome';
@import '@fortawesome/fontawesome-free/scss/solid';
@import '@fortawesome/fontawesome-free/scss/regular';
@import '@fortawesome/fontawesome-free/scss/brands';
@import '@fortawesome/fontawesome-free/scss/v4-shims';

Já na pasta, application.js insira:

import "@fortawesome/fontawesome-free/js/all";

E pronto! Agora você já pode utilizar. Em alguma página na sua aplicação, insira:

<i class="fab fa-twitter fa-2x"></i>

Se aparecer o ícone do twitter, a instalação ocorreu como o esperado \o/